12

私は混乱しています。ページごとに1回しか使用できない場合ng-app、さまざまな.jsファイルのさまざまなモジュールにあるディレクティブをどのように使用できますか。見て：

<script src='mainModule.js'/>
<script src='secondModule.js'/>
<body ng-app='mainModule'>
   <my-thingy/>
   <div>
      <other-thingy/>
   </div> 
</body>

mainModule.js:
   angular.module("mainModule",[]).directive("myThingy",function(){ ... })

secondModule.js:
   angular.module("secondModule",[]).directive("otherThingy",function(){ ... })

では、mainModule.jsから参照せずに、ページ上のsecondModuleをポイントするにはどうすればよいですか。

4

2 に答える 2

50

@Agzam、ディレクティブを含むサブモジュールに依存する、3番目のトップレベルのアプリケーションモジュールを作成するだけです。

<script src='mainModule.js'/>
<script src='secondModule.js'/>
<script>
  angular.module('app', ['mainModule', 'secondModule'])
</script>
<body ng-app='app'>
   <my-thingy/>
   <div>
      <other-thingy/>
   </div> 
</body>
于 2013-03-26T18:16:11.633 に答える
0

プログラムでページ上のいくつかのAngularモジュールをブートストラップするソリューションがあります（docs）。

ng-appHTMLから属性を削除する必要があります。

いくつかのモジュールを定義します。

var app1 = angular.module('myApp1', []);

var app2 = angular.module('myApp2', []);

app1.controller('MainCtrl', function($scope) {
  $scope.name = 'App1';
});

app2.controller('MainCtrl', function ($scope) {
  $scope.name = 'App2';
})

そして、index.htmlで次のことを行います。

  <html>
  <head></head>
  <body>
    <!-- Module 1 -->
    <div id="myApp1">
      <div ng-controller="MainCtrl">
        <h1>Hello {{name}}</h1>
      </div>
    </div>
    <!-- Module 2 -->
    <div id="myApp2">
      <div ng-controller="MainCtrl">
        <h1>Hello {{name}}</h1>
      </div>
    </div>
    <!-- Bootstrap modules -->
    <script>
      angular.element(document).ready(function() {
          angular.bootstrap(document.getElementById('myApp1'), ['myApp1']);
          angular.bootstrap(document.getElementById('myApp2'), ['myApp2']);
     });
    </script>
  </body>
  </html>

これは、このソリューションで機能するplnkrです。

于 2013-03-26T16:27:54.040 に答える