带有angularjs的一页中的多个模块
发布时间:2020-12-17 17:48:25 所属栏目:安全 来源:网络整理
导读:如何在单个页面中使用多个模块? 我读了一些文档,他们说我不能使用ngApp指令,应该使用angular.bootstrap. 我的HTML代码: div id="M1" div ng-controller="Ctrl" h1Hello {{name}}/h1 /div/divdiv id="M2" div ng-controller="Ctrl" [{{name}}] /div/div 我
如何在单个页面中使用多个模块?
我读了一些文档,他们说我不能使用ngApp指令,应该使用angular.bootstrap. 我的HTML代码: <div id="M1"> <div ng-controller="Ctrl"> <h1>Hello {{name}}</h1> </div> </div> <div id="M2"> <div ng-controller="Ctrl"> [{{name}}] </div> </div> 我的角度代码: var m1 = angular.module('M1',[]); m1.controller('Ctrl',function($scope) { $scope.name = 'M1'; }); var module2 = angular.module('M2',[]); module2.controller('Ctrl',function($scope){ $scope.name = 'M2'; }) angular.bootstrap(document.getElementById('M1'),['M1']); angular.bootstrap(document.getElementById('M2'),['M2']); 但它不起作用. 这是一个现场演示:http://plnkr.co/edit/dkyL8eacoC5ZohfwSWz1?p=preview 解决方法
好像自举太快了.在文档准备好时修改两个boostrap行:
angular.element(document).ready(function() { angular.bootstrap(document.getElementById('M1'),['M1']); angular.bootstrap(document.getElementById('M2'),['M2']); }); 以这种方式修改plnkr时,两个应用程序都开始正常工作. 现场演示:http://plnkr.co/edit/Of0PYWR5ZEGT5BK4sfhI?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |