4

マルチモジュールを1ページで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>

私の角度コード：

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

4

1 に答える 1

8

ブートストラップが早すぎるようです。ドキュメントの準備ができたときに発生するように、2 つのブーストラップ行を変更します。

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

于 2013-03-23T04:36:26.850 に答える