- 一个页面 引用多个 控制器
<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>
// 第一个模块
var app = angular.module('app1',[]);
app.controller('myController',function($scope){
$scope.name = '追梦';
});
// 第二个模块
var app2 = angular.module('app2',[]);
app2.controller('myController1',function($scope){
$scope.name1 = "懦夫";
});
// 这行代码 启动多个 ng-app
angular.bootstrap(document.getElementById("app2"), ['app2']);
// 第二个模块
var app3 = angular.module('app3',[]);
app3.controller('myController3',function($scope){
$scope.name3 = "懦夫232";
});
// 这行代码 启动多个 ng-app
angular.bootstrap(document.getElementById("app3"), ['app3']);
</script>
- 一个控制器 里面 控制多个模块
<body ng-app="app">
<h1>可以再一个主模块中创建多个子模块</h1>
<!-- 第一个 -->
<div ng-controller="myController">
{{name}}
</div>
<!-- 第二个 -->
<div ng-controller="myController1">
{{name2}}
</div>
<script src="../node_modules/angular/angular.js"></script>
<script>
// 创建主模块
var app = angular.module('app',['suna','sunb']);
// 创建模块1
var sunapp1 = angular.module('suna',[]);
// 创建控制器
sunapp1.controller('myController',function($scope){
$scope.name = "AAA";
});
var sunapp2 = angular.module('sunb',[]);
// 创建模块2
sunapp2.controller('myController1',function($scope){
$scope.name2 = "sadas";
});
</script>
</body>
- 关于 $log 打印 和解决闪烁问题
// ng-bind 有局限性，ng-cloak会在加载完后被清除，所以建议这个,如果有多个子元素，
ng-cloak就要放在 父元素上面
// 还有一个方法，把angular.js 的引用提前，因为出现表达式，是因为angular没有被加载
.ng-cloak {display:none;} // 重要
<body ng-app="app" ng-controller="myController">
// 解决闪烁第一种方法
<p ng-bind="name"></p><!-- 里面不放内容 -->
<p class="ng-cloak">{{name}}</p>
{{name}}
<script src="../node_modules/angular/angular.js"></script>
<script>
// 创建模块
var app = angular.module('app',[]);
// 控制器
//这里 controller 第二个参数传递数组形式，为了解决代码压缩问题
app.controller('myController',['$log','$scope',function($log,$scope){
$scope.name = "name";
$log.log('.log')
}]);
</script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
