在 AngularJS 中使用两个模块
[英] Working with two modules in AngularJS
本文介绍了在 AngularJS 中使用两个模块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个具有不同操作的模块，我尝试使用它们，如下所示.
<div ng-controller="xhrCtrl"><button ng-click="callAction()">点击</button>{{样本}}
<div id="viewBodyDiv2" ng-app="xhr2"><div ng-controller="xhr2Ctrl"><button ng-click="alertMessage()">点击</button>
JS 如下所示.
angular.module('xhr', []).controller('xhrCtrl', function ($http, $scope, $window) {$scope.sample = "sadf";$scope.callAction = 函数 () {$http({方法:'获取'，网址:'角度/获取数据'，参数:{api_key: 'abc'}}).then(function (obj) {//我得到一个显示在按钮附近的文本结果$scope.sample = obj.data;});};});angular.module('xhr2', []).controller('xhr2Ctrl', ['$window','$scope',函数($window，$scope){$scope.alertMessage = 函数 () {$window.alert("xhr2Ctrl 点击");};}]);
当我点击 viewBodyDiv 时，我得到了想要的输出，但是当我点击 viewBodyDiv2 时，没有显示警报消息.
我是 AngularJS 的新手，请告诉我我做错了什么，或者在 Angular 中使用两个不同模块的过程是什么.
谢谢.
解决方案
根据 AngularJS 文档:
https://docs.angularjs.org/api/ng/directive/ngApp
每个 HTML 文档只能自动引导一个 AngularJS 应用程序.文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导.
但是，如果您仍然想这样做，则必须手动使用 angular.boostrap() 来实现此目的.这是一个很好的教程:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
因此您需要引导模块以在同一页面上拥有多个 Angular 应用程序.
您也可以将一个模块注入另一个模块.
var xhrModule = angular.module("xhr", ["xhr2"]);
以下是用于引导模块的示例代码.
<头><script src="angular.min.js"></script><身体><div id="viewBodyDiv" ng-app="xhr"><div ng-controller="xhrCtrl"><button ng-click="callAction()">点击</button>{{样本}}
<div id="viewBodyDiv2" ng-app="xhr2"><div ng-controller="xhr2Ctrl"><button ng-click="alertMessage()">点击</button>
<脚本>var xhrModule = angular.module("xhr", []);xhrModule.controller('xhrCtrl', function ($http, $scope, $window) {$scope.sample = "sadf";$scope.callAction = 函数 () {$http({方法:'获取'，网址:'角度/获取数据'，参数:{api_key: 'abc'}}).then(function (obj) {//我得到一个显示在按钮附近的文本结果$scope.sample = obj.data;});};});var xhr2Module = angular.module("xhr2", [])xhr2Module.controller('xhr2Ctrl', ['$window','$scope',函数($window，$scope){$scope.alertMessage = 函数 () {$window.alert("xhr2Ctrl 点击");};}]);angular.bootstrap(document.getElementById("viewBodyDiv2"),['xhr2']);
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>
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");
};
}]);
When I click on the viewBodyDiv I am getting the desired output but when I click on viewBodyDiv2 the alert message is not getting displayed.
I am new to AngularJS and please let me know what I am doing wrong or what it the procedure to work with two different Modules in Angular.
Thank you.
解决方案
As per the AngularJS documentation:
https://docs.angularjs.org/api/ng/directive/ngApp
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
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:
http://www.simplygoodcode.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"]);
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屋！
查看全文
