Почему одно приложение работает одновременно?

0

У меня есть 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&nbsp;{{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

Что может быть причиной этого?

  • 0
    Angular сохраняет глобальное состояние - невозможно иметь два угловых приложения одновременно на одном и том же DOM.
Теги:

1 ответ

2
Лучший ответ

Угловые бутстрапы - только первое найденное приложение. Подробнее здесь.

Чтобы иметь более одного приложения, вам необходимо вручную загрузить второй:

angular.element(<your element>).ready(function() {
  angular.bootstrap(<your element>, ['transactionStatus']);
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню