AngularJS如何在同一个界面启动多个ng-app应用模块
来源:互联网 发布:初级程序员考试内容 编辑:程序博客网 时间:2024/06/06 00:11
AngularJS默认在一个html界面中只启动一个 ng-app 模块,而且是界面中第一次出现的那个使用 ng-app 声明的模块,该问题可以通过查看AngularJS源代码或者是文档验证。
解决方案:
直接上代码,如果有兴趣了解其中缘由,可以选择阅读后面的部分;
<!DOCTYPE html><html><head lang="zh_CN"> <meta charset="UTF-8"> <title>AngularJS Source Code Analysis</title> <script src="source/angular.min.js" type="text/javascript"></script> <script src="source/angular-route.min.js" type="text/javascript"></script></head><body> <div ng-app="myApp-0" ng-controller="nameCtrl"> <input type="text" ng-model="age"/>{{ demo }}--{{ age }} <ul> <li ng-repeat="val in names" ng-bind="val"></li> </ul> </div> <!-- 并行启动多个ng-app --> <div id="test-0" ng-controller="testCtrl_0"> <p>{{content.message}}</p> </div> <div id="test-1" ng-controller="testCtrl_1"> <p>{{content.message}}</p> </div></body><script> var myApp_0 = angular.module("myApp-0", []); myApp_0.controller('nameCtrl', function ($scope, $rootScope){ $scope.names = ["shen", "amy", "sereno"]; $scope.age = 24; $rootScope.demo = "demo"; }); var myApp_1 = angular.module("myApp-1", []); myApp_1.controller('nameCtrl-1', function ($scope, $rootScope){ $scope.names = ["shen-1", "amy-1", "sereno-1"]; $rootScope.age = 24; }); // 并行启动多个 ng-app var myApp1mod = angular.module('test-0',[]); myApp1mod.controller('testCtrl_0',function($scope){ var content= {}; content.message = "Hello Test-0"; $scope.content= content; }); var myApp2mod = angular.module('test-1',[]); myApp2mod.controller('testCtrl_1',function($scope){ var content= {}; content.message = "Hello Test-1"; $scope.content= content; }); angular.element(document).ready( function (){ angular.bootstrap(document.getElementById("test-0"), ["test-0"]); angular.bootstrap(document.getElementById("test-1"), ["test-1"]); } );</script></html>
2 0
- AngularJS如何在同一个界面启动多个ng-app应用模块
- angularJS启动多个ng-app
- angularjs 启动多个ng-app
- angularjs 多个ng-app
- AngularJs一个页面多个ng-app的问题
- 单个angular页面如何加载多个ng-app应用---------------------学习笔记
- 如何在android手机上实现app开机自动运行启动(可以打开应用界面)。
- R 如何在同一个界面画出多张图形
- 初识AngularJS之应用(ng-app)篇
- 在同一个电脑上同时启动多个tomcat
- idea 在同一个tomcat启动多个项目
- 关于angularjs中多个ng-app该如何启用的问题
- 如何在多个页面使用同一个HTML片段
- 如何在多个页面使用同一个HTML片段《续》
- AngularJS之ng-app指令
- AngularJS中一个HTML文档启动多个应用
- 多个app连接同一个service
- AngularJS ng-repeat简单应用
- IE浏览器版本判断
- Android各厂商自启动管理开发
- if 和 switch的区别和应用
- 推荐一个安卓开发用得到的Chrome插件
- GDT,LDT,GDTR,LDTR 详解,包你理解透彻
- AngularJS如何在同一个界面启动多个ng-app应用模块
- checkio-how to find friends
- ios-NSString与NSDate互相转换及时间早晚比较
- 设置launchImage显示的时间
- 遗传算法
- Transaction 那点事儿
- 微信网页授权开发实例--esay版
- Spring+dubbo+mybatis出现NoSuchMethodError和MutablePropertyValues.add异常
- java对cookie的操作