前段时间才开始接触angularjs,碰到angularjs启动多个ng-app一直不成功的问题,查询了很多资料后,经过实验,具体操作如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery/jquery-2.1.0.min.js"></script> <script src="js/angularjs/angular.min.js"></script> </head> <body> <div id="div1" ng-app="myApp1" ng-controller="app1Ctrl"></div> <div id="div2" ng-app="myApp2" ng-controller="app2Ctrl"></div> <script src="js/app2.js"></script> <script type="text/javascript"> angular.bootstrap(angular.element("#div2"),["myApp2"]); </script> <script src="js/app1.js"></script> </body> </html>angularjs默认只加载一个ng-app,因此其他ng-app需要手动加载,以上各文件的应用顺序不能随意调换,否则可能无法正常显示。
app1.js如下:
var app1 = angular.module('myApp1',[]); app1.controller('app1Ctrl', function () { var div1= document.getElementById('div1'); div1.innerHTML="Hello, "; })
var app2 = angular.module('myApp2',[]); app2.controller('app2Ctrl', function () { var div2= document.getElementById('div2'); div2.innerHTML="World!"; })