У меня есть 2 div
каждый из которых применяется с ng-app
. Но странно, что за одно время работает только одно ng-app
. Когда я запускаю следующее:
<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>
выход:
Hey! Happy new year.
Hello {{transactionDetails.completeName}}
Your current status: {{transactionDetails.statusText}}
Но если я удалю div с ng-app
, он будет работать так, как ожидалось, и выход:
Hello Brian Silas
Your current status: Confirmed
Что может быть причиной этого?
Угловые бутстрапы - только первое найденное приложение. Подробнее здесь.
Чтобы иметь более одного приложения, вам необходимо вручную загрузить второй:
angular.element(<your element>).ready(function() {
angular.bootstrap(<your element>, ['transactionStatus']);
});