Puis-je utiliser une ng-app à l'intérieur de l'autre en AngularJS

J'ai deux ng-app
comme ;

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

est-il un moyen de le faire fonctionner?
quand je fais un imbriquée ng-app ne fonctionne pas

Je sais que je peux utiliser deux différents contrôleur mais je ne veux pas utiliser deux contrôleurs
---- EDIT -----

La chose est; 

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

J'ai DONC besoin en quelque sorte de changer ce ng-app de la directive

  • Votre application peut inclure des références à d'autres modules qui peuvent contenir des services, contrôleurs, directives, etc. Vous avez juste besoin d'avoir une application principale qui fait référence à d'autres - qu'est-ce exactement que vous essayez de faire?
  • Avez-vous l'essayer? Quels problèmes avez-vous? Lors de la création d'une coutume directive; une approche consiste à ajouter que la directive sur son propre module. Ensuite, vous pouvez passer le nom du module comme un argument à un module et l'accès à ceux de la directive à l'intérieur de l'autre module. UI Bootstrap est mis en œuvre cette manière. c'est un peu comme l'aide d'une application à l'intérieur de l'autre.
  • Il est possible de la pensée d'avoir deux applications à l'intérieur d'une page... mais c'est salissant pour gérer le routage lorsque vous faites cela. Vous pouvez manuellement bootstrap deux applications à l'intérieur de différents éléments, même avec leur propre ng-view pour chacun d'eux, mais comme je l'ai dit, le routage est une douleur dans le cul, parce que les deux applications utilisent le même emplacement, mais différents routeProviders
  • La douleur peut être résolu en remplaçant $de la fenêtre.emplacement.hash (pour les non html5Mode) par ngApp.
InformationsquelleAutor zyrag | 2014-03-21
  1. 27

    De la AngularJS document, la réponse est non

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

    AngularJS les applications ne peuvent pas être imbriquées les unes dans les autres.

    Et si pas imbriquées, alors c'est OK, quelqu'un a déjà posé cette question, reportez-vous ici:AngularJS Plusieurs ng-app au sein d'une page
    et le AnguarJS document

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

    Une seule application AngularJS peut être auto-amorcé par document HTML. La première ngApp trouve dans le document sera utilisé pour définir l'élément racine auto-amorçage comme une application. Pour exécuter plusieurs applications dans un document HTML, vous devez manuellement bootstrap utilisant angulaire.bootstrap à la place.

    InformationsquelleAutor xiaoboa
  2. 13

    J'ai trouvé une délicate solution pour ce problème. L'idée est que les "hôtes" de l'application ont en quelque sorte sauter par-dessus l'élément racine de imbriquée application. J'ai utilisé de la directive pour ce:

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

    Exemple simple d'application:

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

    Maintenant dans le balisage, nous pouvons utiliser la ng-isoler-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>

    De travail exemple sur plnkr

    Cela fonctionne dans les cas simples, je ne sais pas comment cela va fonctionner sur des applications complexes.

    • C'est la réponse promoteurs immobiliers veulent entendre!
    • s'il vous plaît pouvez-vous vérifier le lien pour le jsFiddle
    • Bien fait. Avec succès à l'aide de la production. Beaucoup d'amour!
    InformationsquelleAutor majo
  3. 0

    Vous ne pouvez pas utiliser une ng-app à l'intérieur d'un autre sur angularjs.
    parce que AngularJS les applications ne peuvent pas être imbriquées les unes dans les autres.

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

    InformationsquelleAutor Sumit