- 一個(gè)頁面 引用多個(gè) 控制器
<div ng-app="app1" ng-controller="myController">
{{name}}
</div>
<div id="app2" ng-app="app2" ng-controller="myController1">
{{name1}}
</div>
<div id="app3" ng-app="app3" ng-controller="myController3">
{{name3}}
</div>
<script src="../node_modules/angular/angular.js"></script>
<script>
// 第一個(gè)模塊
var app = angular.module('app1',[]);
app.controller('myController',function($scope){
$scope.name = '追夢';
});
// 第二個(gè)模塊
var app2 = angular.module('app2',[]);
app2.controller('myController1',function($scope){
$scope.name1 = "懦夫";
});
// 這行代碼 啟動(dòng)多個(gè) ng-app
angular.bootstrap(document.getElementById("app2"), ['app2']);
// 第二個(gè)模塊
var app3 = angular.module('app3',[]);
app3.controller('myController3',function($scope){
$scope.name3 = "懦夫232";
});
// 這行代碼 啟動(dòng)多個(gè) ng-app
angular.bootstrap(document.getElementById("app3"), ['app3']);
</script>
- 一個(gè)控制器 里面 控制多個(gè)模塊
<body ng-app="app">
<h1>可以再一個(gè)主模塊中創(chuàng)建多個(gè)子模塊</h1>
<!-- 第一個(gè) -->
<div ng-controller="myController">
{{name}}
</div>
<!-- 第二個(gè) -->
<div ng-controller="myController1">
{{name2}}
</div>
<script src="../node_modules/angular/angular.js"></script>
<script>
// 創(chuàng)建主模塊
var app = angular.module('app',['suna','sunb']);
// 創(chuàng)建模塊1
var sunapp1 = angular.module('suna',[]);
// 創(chuàng)建控制器
sunapp1.controller('myController',function($scope){
$scope.name = "AAA";
});
var sunapp2 = angular.module('sunb',[]);
// 創(chuàng)建模塊2
sunapp2.controller('myController1',function($scope){
$scope.name2 = "sadas";
});
</script>
</body>
- 關(guān)于 $log 打印 和解決閃爍問題
// ng-bind 有局限性，ng-cloak會(huì)在加載完后被清除晕换，所以建議這個(gè),如果有多個(gè)子元素午乓，
ng-cloak就要放在 父元素上面
// 還有一個(gè)方法，把a(bǔ)ngular.js 的引用提前闸准，因?yàn)槌霈F(xiàn)表達(dá)式益愈，是因?yàn)閍ngular沒有被加載
.ng-cloak {display:none;} // 重要
<body ng-app="app" ng-controller="myController">
// 解決閃爍第一種方法
<p ng-bind="name"></p><!-- 里面不放內(nèi)容 -->
<p class="ng-cloak">{{name}}</p>
{{name}}
<script src="../node_modules/angular/angular.js"></script>
<script>
// 創(chuàng)建模塊
var app = angular.module('app',[]);
// 控制器
//這里 controller 第二個(gè)參數(shù)傳遞數(shù)組形式，為了解決代碼壓縮問題
app.controller('myController',['$log','$scope',function($log,$scope){
$scope.name = "name";
$log.log('.log')
}]);
</script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
