Question

我有两个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更改为指令

Answer 1

从AngularJS文档中，答案是否

http://docs.angularjs.org/api/ng/directive/ngApp

AngularJS应用程序不能互相嵌套。

如果没有嵌套，那么可以，有人已经问过这个问题，请参考：AngularJS Multiple ng-app within a page 和AnguarJS文件

http://docs.angularjs.org/api/ng/directive/ngApp

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。

Answer 2

我发现了一个棘手的解决方案。这个想法是＆＃34;主持人＆＃34;应用程序必须以某种方式跳过嵌套应用程序的根元素。我使用了指令：

    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);
                    });
                }
            }
        }
    });

简单应用示例：

// 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>

工作example on plnkr

这在简单的情况下有效，我不知道它如何在复杂的应用程序上运行。

Answer 3

您无法在angularjs中使用另一个ng-app。因为AngularJS应用程序不能互相嵌套。

https://docs.angularjs.org/api/ng/directive/ngApp

我可以在AngularJS中的另一个内使用一个ng-app

3 个答案: