在不同的模块angular.js指令 [英] angular.js directives in different modules
本文介绍了在不同的模块angular.js指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我很困惑。如果我可以使用 NG-应用只有一次每页我怎么可以使用坐在不同的模块，在不同的.js文件的指令。你看：
I am confused. If I can use ng-app only once per page how can I use directives that sit in different modules, in different .js files. Look:
<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引用它
So, how do I now point to the secondModule on the page, without referencing it from mainModule.js
推荐答案
有是引导页面上的几个角模块编程解决方案（的文档）。
There is a solution to bootstrap several angular modules on a page programmatically ( docs ).
您必须从HTML删除 NG-应用属性。
You have to remove ng-app attribute from html.
定义几个模块：
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的事：
And then in index.html do:
<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 与此解决方案。
Here is a working plnkr with this solution.
这篇关于在不同的模块angular.js指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
