angular.js指令在不同模块中

我很困惑。如果我每页只能使用ng-app一次，我怎样才能使用位于不同模块中的指令，使用不同的.js文件。看：angular.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(){ ... })

所以，我怎么现在指向页面上的secondModule，而不mainModule.js

来源

2013-03-26 Agzam

有自举程序在页面上几个角模块的解决方案引用它（docs）。

您必须从html中删除ng-app属性。

定义几个模块：

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-26 16:27:54

我不认为这是一个很好的解决方案，因为它将启动2个完全分离的AngularJS应用程序。除此之外，它禁止使用一些用例（例如，如果我想使用两个指令，一个在另一个指令中怎么办？ – 2013-03-26 18:19:31

可以以某种方式重用指令而不将其绑定到任何模块吗？ – Agzam 2013-03-27 15:05:58

实际上不是。这就是弱点@ pkozlowski.opensource在他的回答中描述的另一种方式 – 2013-03-27 15:55:18

@Agzam，只是创建第三，顶层，应用模块，它将对包含指令你的子模块的依赖关系：

<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-26 18:16:11

这应该是公认的答案。 – JSancho 2015-05-06 14:22:01

angular.js指令在不同模块中

回答

相关问题