Могу ли я использовать одно ng-приложение внутри другого в AngularJS

У меня есть два ng-приложения например;

<div ng-app="app1" >
    somexpression   
    <div ng-app="app2">
        some more expression
    </div>
</div>

Есть ли способ заставить его работать? когда я создаю вложенное ng-приложение, оно не работает.

Я знаю, что я могу использовать два разных контроллера, но я не хочу использовать два контроллера ---- EDIT -----

Вещь;

 angular.module('AppName', [
            'angular-carousel'
        ])

SO Мне нужно как-то изменить это ng-приложение на директиву

Ответ 1

Из документа AngularJS ответ не является

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

Приложения AngularJS не могут быть вложены друг в друга.

И если не вложен, тогда все в порядке, кто-то уже задал этот вопрос, см. здесь: Множественное ng-приложение AngularJS на странице и документ AnguarJS

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

Только одно приложение AngularJS может автоматически загружаться в HTML-документ. Первый ngApp, найденный в документе, будет использоваться для определения корневого элемента для автоматической загрузки в качестве приложения. Чтобы запустить несколько приложений в документе HTML, вы должны вручную загрузить их с помощью angular.bootstrap.

Ответ 2

Я нашел одно сложное решение для этой проблемы. Идея заключается в том, что приложение "хост" должно каким-то образом перепрыгнуть через корневой элемент вложенного приложения. Я использовал для этого директиву:

    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>

Работает пример на plnkr

Это работает в простых случаях, я не знаю, как это будет работать в сложных приложениях.

Ответ 3

Вы не можете использовать одно ng-приложение внутри другого в angularjs. потому что приложения AngularJS не могут быть вложены друг в друга.

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