module - 使用angularjs在一页中的多个模块

Question

如何在一个页面中以 Angular 使用多个模块？

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

我的 Angular 代码:

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

Answer 1

似乎引导发生得太快了。修改两个 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