Question

我有两个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}}

但是如果我用ng-app删除div，它会按预期工作，输出为：

Hello Brian Silas 
Your current status: Confirmed

这可能是什么原因？

Answer 1

Angular bootstraps只是第一个找到的应用程序。更多详情here。

要拥有多个应用程序，您需要手动引导第二个应用程序：

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

为什么一个ng-app一次正在运行？

1 个答案: