我有两个ng-app喜欢;
<div ng-app="app1" >
somexpression
<div ng-app="app2">
some more expression
</div>
</div>
有没有办法使它工作？当我制作嵌套的ng-app时,它不起作用
我知道我可以使用两个不同的控制器,但我不想使用两个控制器 ----编辑-----
事情是;
angular.module('AppName', [
'angular-carousel'
])
所以我需要以某种方式将此ng-app更改为指令
xia*_*boa 27
从AngularJS文档中,答案是否定的
http://docs.angularjs.org/api/ng/directive/ngApp
AngularJS应用程序不能互相嵌套.
如果没有嵌套,那么没关系,有人已经问过这个问题,请参考这里:AngularJS页面内的多个ng-app 和AnguarJS文档
http://docs.angularjs.org/api/ng/directive/ngApp
每个HTML文档只能自动引导一个AngularJS应用程序.在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素.要在HTML文档中运行多个应用程序,必须使用angular.bootstrap手动引导它们.
maj*_*ajo 13
我发现了一个棘手的解决方案.这个想法是"主机"应用程序必须以某种方式跳过嵌套应用程序的根元素.我使用了指令:
angular.module("ng").directive("ngIsolateApp", function() {
return {
"scope" : {},
"restrict" : "AEC",
"compile" : function(element, attrs) {
// removing body
var html = element.html();
element.html('');
return function(scope, element) {
// destroy scope
scope.$destroy();
// async
setTimeout(function() {
// prepare root element for new app
var newRoot = document.createElement("div");
newRoot.innerHTML = html;
// bootstrap module
angular.bootstrap(newRoot, [attrs["ngIsolateApp"]]);
// add it to page
element.append(newRoot);
});
}
}
}
});
示例简单app:
// module definition
angular.module("testMod1",[])
.service("moduleService", function ModuleService() {
this.counter = 0;
this.getCounter = function() {
return this.counter;
};
this.incCounter = function() {
this.counter += 1;
}
})
.controller("ModuleCtrl", function(moduleService) {
this.getValue = function() {
return moduleService.getCounter();
};
this.incValue = function() {
moduleService.incCounter();
};
});
现在在标记中我们可以使用ng-isolate-app:
<!-- App instance 1 -->
<body ng-app="testMod1">
<div ng-controller="ModuleCtrl as ctrl">
{{ctrl.getValue()}}
<button ng-click="ctrl.incValue()">Click</button>
<!-- App instance 2 -->
<div ng-isolate-app="testMod1">
<div ng-controller="ModuleCtrl as ctrl">
{{ctrl.getValue()}}
<button ng-click="ctrl.incValue()">Click</button>
<!-- App instance 3 -->
<div ng-isolate-app="testMod1">
<div ng-controller="ModuleCtrl as ctrl">
{{ctrl.getValue()}}
<button ng-click="ctrl.incValue()">Click</button>
</div>
</div>
</div>
</div>
</div>
</body>
这在简单的情况下工作,我不知道这将如何在复杂的应用程序上工作.
| 归档时间： |
|
| 查看次数： |
29381 次 |
| 最近记录： |