Multiple ng-app inside one root-app

时间:2016-10-04 14:44:51

标签: javascript jquery angularjs

I am new to angularjs.Using multiple ng-apps in same page. like app2 inside app1 and app1 inside rootApp.

controller1 has one $http service it will retrieve the id and name and assign it to $rootScope.

I want to use that values in controller2 in app2.

But the problem is both app1 called first and then app2 called immediately without getting id and name.

Because service takes some time to retrieve the id and name value.

I want to call app2 after getting the id and name from app1. How i can achieve this,

<body ng-app="rootApp">
...
<div ng-app="app1" ng-controller ="controller1">


.....

<div ng-app="app2" ng-controller="controller2">

</div>

</div>

</body>

var app1 = angular.module('app1', []); /

app1.controller('controller1', function ($scope, $filter, $rootScope) {

$http.get().success(function(data){
$rootScope.id=data.id;
$rooTScope.name=data.name;
});
});

var app2 = angular.module('app2', []); /

app2.controller('controller2', function ($scope, $filter, $rootScope) {

//here i want to use that $rootscopeValues of id and name

});

1 个答案:

答案 0 :(得分:1)

您只能拥有一个ng-app和多个ng-controller。注意你如何拼写$ rootScope。

var app = angular.module('app', [])
.controller('controller1', function($scope, $filter, $rootscope){
   $http.get().success(function(data){
     $rootScope.id = data.id;
     $rootScope.name = data.name;
   });

})
.controller('controller2', function($scope, $filter, $rootscope){
   console.log($rootScope.id);
   console.log($rootScope.name);
});

文件正文:

<body ng-app="app">
...
<div  ng-controller ="controller1">


.....

<div ng-controller="controller2">

</div>

</body>