在AngularJS两个模块的工作 [英] Working with two modules in AngularJS
问题描述
我有不同的操作两个模块，我尝试如下图所示与他们合作。
I have two modules with different operations and I tried to work with them as shown below.
<div id="viewBodyDiv" ng-app="xhr">
<div ng-controller="xhrCtrl">
<button ng-click="callAction()">Click</button>
{{sample}}
</div>
</div>
<div id="viewBodyDiv2" ng-app="xhr2">
<div ng-controller="xhr2Ctrl">
<button ng-click="alertMessage()">Click</button>
</div>
</div>
的JS如下所示。
The JS is shown below.
angular.module('xhr', []).controller('xhrCtrl', function ($http, $scope, $window) {
$scope.sample = "sadf";
$scope.callAction = function () {
$http({
method: 'GET',
url: 'Angular/GetData',
params: {
api_key: 'abc'
}
}).then(function (obj) { //I get a text result that I display near the button
$scope.sample = obj.data;
});
};
});
angular.module('xhr2', []).controller('xhr2Ctrl', ['$window','$scope',
function ($window,$scope) {
$scope.alertMessage = function () {
$window.alert("xhr2Ctrl clicked");
};
}]);
当我点击viewBodyDiv我得到所需的输出，但是当我点击viewBodyDiv2是没有得到显示警报消息。
我是新来AngularJS并请让我知道我做错了或什么程序用两个不同的模块在角工作。
感谢您。
推荐答案
由于每AngularJS文档：
As per the AngularJS documentation:
https://docs.angularjs.org/api/ng/directive/ngApp
只有一个AngularJS应用程序可以自动自举每个HTML文档。第一ngApp在文档中找到将被用于定义根元素自动引导作为一个应用程序。
不过，如果您仍然希望做这种方式，你必须手动使用angular.boostrap（）来实现这一目标。这里是一个很好的教程上这样的：
However, if you still want to do it this way, you have to use angular.boostrap() manually to achieve this. Here is a good tutorial on this:
<一个href=\"http://www.simplygood$c$c.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/\" rel=\"nofollow\">http://www.simplygood$c$c.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
所以，你需要引导的模块具有相同的页面上有多个角度的应用程序。
So you need to bootstrap the module to have multiple angular apps on the same page.
您也可以注入的模块之一到另一个。
You can also inject one of the modules into another.
VAR xhrModule = angular.module（XHR，[XHR2]）;
下面是一个示例code提供引导模块。
Following is a sample code for bootstrapping the module.
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div id="viewBodyDiv" ng-app="xhr">
<div ng-controller="xhrCtrl">
<button ng-click="callAction()">Click</button>
{{sample}}
</div>
</div>
<div id="viewBodyDiv2" ng-app="xhr2">
<div ng-controller="xhr2Ctrl">
<button ng-click="alertMessage()">Click</button>
</div>
</div>
<script>
var xhrModule = angular.module("xhr", []);
xhrModule.controller('xhrCtrl', function ($http, $scope, $window) {
$scope.sample = "sadf";
$scope.callAction = function () {
$http({
method: 'GET',
url: 'Angular/GetData',
params: {
api_key: 'abc'
}
}).then(function (obj) { //I get a text result that I display near the button
$scope.sample = obj.data;
});
};
});
var xhr2Module = angular.module("xhr2", [])
xhr2Module.controller('xhr2Ctrl', ['$window','$scope',
function ($window,$scope) {
$scope.alertMessage = function () {
$window.alert("xhr2Ctrl clicked");
};
}]);
angular.bootstrap(document.getElementById("viewBodyDiv2"),['xhr2']);
</script>
这篇关于在AngularJS两个模块的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
