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:
我很困惑。如果我每页只能使用一次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(){ ... })
So, how do I now point to the secondModule on the page, without referencing it from mainModule.js
那么,我现在如何指向页面上的secondModule,而不是从mainModule.js引用它
2 个解决方案
#1
0
There is a solution to bootstrap several angular modules on a page programmatically ( docs ).
有一种解决方案可以编程方式在页面上引导几个角度模块(docs)。
You have to remove ng-app
attribute from html.
您必须从html中删除ng-app属性。
Define several modules:
定义几个模块:
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';
})
And then in index.html do:
然后在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>
Here is a working plnkr with this solution.
这是一个有效的解决方案。
#2
49
@Agzam, just create a third, top-level, application module that will have dependencies on your sub-modules containing directives:
@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>
#1
0
There is a solution to bootstrap several angular modules on a page programmatically ( docs ).
有一种解决方案可以编程方式在页面上引导几个角度模块(docs)。
You have to remove ng-app
attribute from html.
您必须从html中删除ng-app属性。
Define several modules:
定义几个模块:
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';
})
And then in index.html do:
然后在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>
Here is a working plnkr with this solution.
这是一个有效的解决方案。
#2
49
@Agzam, just create a third, top-level, application module that will have dependencies on your sub-modules containing directives:
@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>