【AnjularJS系列4】單個頁面加載多個ng-App

時間 2019-12-09

標籤 AnjularJS系列4 單個頁面加載多個 app 简体版

原文原文鏈接

第四篇，插播，單個頁面加載多個ng-Appjavascript

在寫範例的時候發現的問題css

一個頁面有多個ng-app，angular只會處理第一個ng-app html

須要加載兩個ng-app，須要進行手動加載：java

angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);bootstrap

注：必須給ng-app的元素進行Id賦值，才能進行手動加載。app

如下爲完整代碼：ide

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script src="js/angular.min.js"></script> 
 6     <style type="text/css">
 7 
 8     </style>
 9 </head>
10 <body> 
11     <div id="mysimpleBind" ng-app="mysimpleBind" ng-controller="MySimplectrl">
12         <div>
13             <label>Name:</label>
14             <input type="text" ng-model="name"  placeholder="請輸入姓名" name="">
15         </div>
16         <div>
17             <label>問候語：</label>
18             <label>Hello,{{name}}</label>
19         </div>
20     </div>  
21     二、雙向綁定
22     <div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">
23         <div>
24             <label>暱稱:</label>
25             <input type="text" ng-model="user.name"  placeholder="請輸入姓名">
26             <input type="button" value="獲取年齡" ng-click="GetAge();">
27         </div>
28         <div>
29             <label>年齡：</label>
30             <label> {{user.agetext}}</label>
31         </div>
32     </div> 
33 </body>
34 <script type="text/javascript">  
35     var myModule = angular.module('myBind', []);
36     myModule.controller("MyBindctrl",function($http,$scope){
37         var nameInfo= [{name:"張立偉",age:20},{name:"閔志濤",age:21},{name:"楊一凡",age:22},{name:"黃徵",age:29}];  
38         $scope.GetAge=function(){ 
39             var _bl=false;
40             for(var i=0;i<nameInfo.length;i++)
41             {
42                 if (nameInfo[i].name==$scope.user.name) {
43 
44                     $scope.user.agetext= $scope.user.name+"今年"+nameInfo[i].age+"歲了";
45                     _bl=true;
46                     break;
47                 }
48             } 
49             if (!_bl) {
50                 $scope.user.agetext=  "找不到記錄";
51             }
52         };
53     }); 
54     var myModule1 = angular.module('mysimpleBind', []);
55     myModule1.controller("MySimplectrl",function($http,$scope){
56     }); 
57 
58     angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
59     angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);
60 
61 </script>
62 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。