I have 2 div
each applied with a ng-app
. But it is strange, that only one ng-app
is working at a time. When I run the following :
<html>
<body>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js'></script>
<div ng-app='myApp'>
<span ng-controller="textController">{{greetMessage.ny}}</span>
</div>
<div ng-app='transactionStatus'>
<p ng-controller="transactionStatusController">
<em>Hello {{transactionDetails.completeName}}</em> <br />
Your current status: {{transactionDetails.statusText}}
</p>
</div>
<script>
var myappModule = angular.module('myApp',[]);
myappModule.controller('textController',function($scope) {
var greetMessage = {};
greetMessage.ny = 'Hey! Happy new year.';
$scope.greetMessage = greetMessage;
});
var transactionStatusModule = angular.module('transactionStatus',[]);
transactionStatusModule.controller('transactionStatusController',function($scope){
var transactionDetails = {};
transactionDetails.completeName = 'Brian Silas';
transactionDetails.statusText = 'Confirmed';
$scope.transactionDetails = transactionDetails;
});
</script>
</body>
the output is:
Hey! Happy new year.
Hello {{transactionDetails.completeName}}
Your current status: {{transactionDetails.statusText}}
But if I remove the the div with ng-app
, it works as expected and the output is :
Hello Brian Silas
Your current status: Confirmed
What could be the reason for this?
Angular bootstraps only the first found application. More details here .
To have more than one application you need to manually bootstrap the second one:
angular.element(<your element>).ready(function() {
angular.bootstrap(<your element>, ['transactionStatus']);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.