angularJS 单页面 两个及以上个 ng-app 的处理方式 

 1 <div ng-app="myApp1" ng-controller="myCtrl1">
 2 
 3     名: <input type="text" ng-model="firstName"><br>
 4     姓: <input type="text" ng-model="lastName"><br>
 5     <br>
 6     姓名: {{firstName + " " + lastName}}
 7 
 8 </div>
 9 <br><br>
10 <div ng-app="myApp2" ng-controller="myCtrl2">
11 
12     名: <input type="text" ng-model="firstName"><br>
13     姓: <input type="text" ng-model="lastName"><br>
14     <br>
15     姓名: {{firstName + " " + lastName}}
16 
17 </div>
18 <br><br>
19 <div ng-app="myApp3" ng-controller="myCtrl3">
20 
21     名: <input type="text" ng-model="firstName"><br>
22     姓: <input type="text" ng-model="lastName"><br>
23     <br>
24     姓名: {{firstName + " " + lastName}}
25 
26 </div>
27 
28 <script>
29     //定义模块应用
30     var app = angular.module('myApp1', []);
31     //定义控制器应用
32     app.controller('myCtrl1', function($scope) {
33 //        $scope相当于作用域、控制范围，是用来保存Model的对象
34         $scope.firstName= "qiu";
35         $scope.lastName= "su";
36     });
37 
38 
39     var app2 = angular.module('myApp2', []);
40     //定义控制器应用
41     app2.controller('myCtrl2', function($scope) {
42 //        $scope相当于作用域、控制范围，是用来保存Model的对象
43         $scope.firstName= "qiu";
44         $scope.lastName= "su";
45     });
46 
47     //手动地让第二个div被myapp2管理
48     angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);
49 
50     var app3 = angular.module('myApp3', []);
51     //定义控制器应用
52     app3.controller('myCtrl3', function($scope) {
53 //        $scope相当于作用域、控制范围，是用来保存Model的对象
54         $scope.firstName= "qiu";
55         $scope.lastName= "su";
56     });
57 
58     //手动地让第三个div被myapp3管理
59     angular.bootstrap(document.querySelector('[ng-app="myApp3"]'), ['myApp3']);
60 </script>

 

posted @ 2017-03-27 18:30  s_qiu  阅读(569)  评论(0)    收藏  举报