AngularJS 在同一个界面启动多个ng-app应用模块详解
AngularJS默认在一个html界面中只启动一个
ng-app模块,而且是界面中第一次出现的那个使用ng-app声明的模块,该问题可以通过查看AngularJS源代码或者是文档验证。
解决方案:
直接上代码,如果有兴趣了解其中缘由,可以选择阅读后面的部分;
<!DOCTYPEhtml> <html> <headlang="zh_CN"> <metacharset="UTF-8"> <title>AngularJSSourceCodeAnalysis</title> <scriptsrc="source/angular.min.js"type="text/javascript"></script> <scriptsrc="source/angular-route.min.js"type="text/javascript"></script> </head> <body> <divng-app="myApp-0"ng-controller="nameCtrl"> <inputtype="text"ng-model="age"/>{{demo}}--{{age}} <ul> <ling-repeat="valinnames"ng-bind="val"></li> </ul> </div> <!--并行启动多个ng-app--> <divid="test-0"ng-controller="testCtrl_0"> <p>{{content.message}}</p> </div> <divid="test-1"ng-controller="testCtrl_1"> <p>{{content.message}}</p> </div> </body> <script> varmyApp_0=angular.module("myApp-0",[]); myApp_0.controller('nameCtrl',function($scope,$rootScope){ $scope.names=["shen","amy","sereno"]; $scope.age=24; $rootScope.demo="demo"; }); varmyApp_1=angular.module("myApp-1",[]); myApp_1.controller('nameCtrl-1',function($scope,$rootScope){ $scope.names=["shen-1","amy-1","sereno-1"]; $rootScope.age=24; }); //并行启动多个ng-app varmyApp1mod=angular.module('test-0',[]); myApp1mod.controller('testCtrl_0',function($scope){ varcontent={}; content.message="HelloTest-0"; $scope.content=content; }); varmyApp2mod=angular.module('test-1',[]); myApp2mod.controller('testCtrl_1',function($scope){ varcontent={}; content.message="HelloTest-1"; $scope.content=content; }); angular.element(document).ready( function(){ angular.bootstrap(document.getElementById("test-0"),["test-0"]); angular.bootstrap(document.getElementById("test-1"),["test-1"]); } ); </script> </html>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!