2015-03-26 12 views
5

mam dwa ng-app w mojej aplikacji app1 i app2 i dwóch kontrolerów firstcontroller i secondcontroller odpowiednio.jak wykonać wiele danych-NG-aplikację w sekwencji w angularjs

Problem polega na tym, że najpierw wykonuje drugi kontroler, a następnie pierwszy kontroler.

Ale chcę wykonać w sekwencji, jak pierwszego sterownika, a następnie drugi kontroler.

proszę podać odpowiednie rozwiązanie.
z góry dzięki.

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>

Odpowiedz

2

Doc powiedział

Aby uruchomić wiele aplikacji w dokumencie HTML należy ręcznie bootstrap nich za pomocą angular.bootstrap

Choć możliwe jest, aby mają wiele ng-app na stronie, ale onl y jedna dyrektywa ng-app zostanie automatycznie utworzona i zainicjowana przez framework Angular.

Teraz zamówienie może być mantianed za pomocą

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

Oto plunker Ci Plunker

+0

ja nie dostaję dokładnie to, co chcesz powiedzieć? ponieważ nie używam (document) .ready (function() {....}); więc gdzie muszę umieścić kod ... –

+0

W początkowym etapie wyjaśniłem, że nie zaleca się używania wielu ng-app na pojedynczej stronie, ale można go używać z ręcznym ładowaniem. I w ostatnim kroku mówiłem ci, jak z niego korzystać. Możliwe, że umieściłeś opcję angle.bootstrap (document.getElementById ("app2"), ['secondapp']); bezpośrednio w swoim skrypcie, który uruchomi się automatycznie, gdy plik skryptu zostanie wczytany jeszcze przed "pierwszymapp'em". Tak, musisz umieścić ten kod wewnątrz angular.element (document) .ready (function() {.}. Tak, aby działał po dokument jest przygotowany i wykonywana jest automatyczna zmiana prowizji (z firstapp). – squiroid

+0

dziękuję, działa dobrze –

Powiązane problemy