带有angularjs的一页中的多个模块

前端之家收集整理的这篇文章主要介绍了带有angularjs的一页中的多个模块前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在单个页面中使用多个模块?

我读了一些文档,他们说我不能使用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

猜你在找的Angularjs相关文章