2015-03-26 8 views
5

einen Mehrfachdaten-ng-app nacheinander auszuführen.jeweils wie in AngularJS

Das Problem ist, es zuerst zweiten Controller dann erster Controller ausführt.

Aber ich möchte in der Reihenfolge, wie erste Controller die Ausführung dann 2. Controller auszuführen.

bitte Lösung dafür bieten.
danke im voraus.

var app1 = angular.module('firstapp', []); 
 
app1.controller("firstcontroller",function($scope){ 
 
    $scope.arr1={name:'arjun'}; 
 
    alert($scope.arr1.name); 
 
}); 
 
var app2 = angular.module('secondapp', []); 
 
app2.controller("secondcontroller",function($scope){ 
 
    console.log("come to second app"); 
 
    $scope.arr2={title:'kumar'}; 
 
    alert($scope.arr2.title); 
 
}); 
 
angular.bootstrap(document.getElementById("app2"),['secondapp']);
<body > 
 
    <div id="app1" data-ng-app="firstapp" data-ng-controller="firstcontroller"> 
 
     <p>{{arr1.name}}</p> 
 
    </div> 
 
    <div id="app2" data-ng-app="secondapp" data-ng-controller="secondcontroller"> 
 
     <p>{{arr2.title}}</p> 
 
    </div> 
 
</body>

Antwort

2

Doc sagte

Um mehrere Anwendungen in einem HTML-Dokument ausführen müssen Sie manuell Bootstrap sie angular.bootstrap

Verwendung Während es möglich ist, habe mehrere ng-app auf der seite aber nur Eine ng-app-Direktive wird automatisch vom Angular-Framework instanziiert und initialisiert.

Jetzt können bestellen

angular.element(document).ready(function() { 
angular.bootstrap(document.getElementById("app2"),['secondapp']); 
}); 

hier unter Verwendung mantianed ist Plunker für Sie Plunker

+0

ich immer bin nicht genau was Sie sagen wollen? weil ich nicht (Dokument) verwende .ready (function() {....}); so, wo ich muß den Code platzieren ... –

+0

Im ersten Schritt i wurde erklärt, dass es nicht empfehlenswert ist, mehrere ng-App in der einzigen Seite zu verwenden, aber Sie können es mit manuellem Bootstrapping verwenden. Und im letzten Schritt habe ich dir gesagt, wie man es benutzt. Es kann möglich sein, dass Sie angular.bootstrap (document.getElementById ("app2"), [ 'secondapp']) gesetzt; direkt in Ihrem Skript, das automatisch ausgeführt wird, wie die Skriptdatei noch vor Ihrem firstapp'.So geladen wird, müssen Sie diesen Code platzieren innerhalb angular.element (document) .ready (function() {.}. Damit es nach laufen das Dokument wird vorbereitet und automatisches boostrapping (von firstapp) erfolgt. – squiroid

+0

dank es gut –