Question

我发现了一个奇怪的例子，我试图在一个HTML页面上使用多个AngularJS控制器，页面将是a，只能识别其中一个控制器，或者b，不识别任何控制器。

当我使用控制器注释掉内容时（但不是对控制器所在脚本的引用），每个控制器似乎完全正常工作并在页面上按预期呈现内容。当控制器不起作用时，页面上的区域只留空。没有{{expressions}}或任何看似破旧的代码。

我发现的最奇怪的事情是，根据我放置的顺序，控制器将决定哪个控制器的内容将消失。

控制器不是嵌套的，不应该以任何方式相互要求起作用。

的index.html

<!doctype html>
<html ng-app="AppName">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="scripts/controllers/NavController.js"></script>
    <script src="scripts/controllers/TableController.js"></script>
</head>

<body>

<!-----------First controller--------------->

<div ng-controller="NavController">
    <div class="nav">
        <p ng-repeat="link in links"><block class="button" href="{{link.URL}}" title="{{link.name}}"><a href="{{link.URL}}">{{link.name}}</a></block></p>
    </div>
</div>


<!-------Second Controller-------------------->

<div ng-controller="TableController">
    <table>
        <tr>
            <td>
                <table cellspacing="0">
                    <tr class="title_bar">
                        <td>Title1</td>
                        <td>Title2</td>
                        <td>Title3</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="color: white" ng-repeat="content in array">
            <td>{{content}}1</td>
            <td>{{content}}2</td>
            <td>{{content}}3</td>
        </tr>
    </table>
</div>

</body>
</html>

NavController.js

var app = angular.module('AppName', []); 

app.controller('NavController', ['$scope', function($scope){
    $scope.links = [
        {'name':'link1',
        'URL': 'link1.html'},
        {'name':'link2',
        'URL': 'link2.html'},
        {'name':'link3',
        'URL': 'link3.html'},
        {'name':'link4',
        'URL': 'link4.html'},
        {'name':'link5',
        'URL': 'link5.html'},
    ];
}]);

TableController.js

var app = angular.module('AppName', []); 

app.controller('TableController', ['$scope',function($scope){
    $scope.array = [
        'some stuff',
        'more stuff',
        'even more'
    ];
}]);

当然Angular可以在一个页面上运行多个控制器 - 这是什么诀窍？

谢谢！

Answer 1

您正在多次声明角度应用程序，每个控制器一次。

您应该首先声明应用程序，您可以在单独的外部JS文件中执行此操作。在包含任何其他控制器JS文件之前，请确保首先包含该文件。

var app = angular.module('MyApp',....);

然后在每个控制器文件中，使用全局app变量：

app.controller('NavigationController',function($scope,$location,$rootScope) ....

下一个控制器文件：

app.controller('SomeOtherController',function($scope,$location,$rootScope) ....

你得到了照片......

Answer 2

您应该只申请一次应用程序：

var app = angular.module('AppName', []);
app.controller(...);

如果要在同一个应用程序中创建新的控制器，指令或服务，则应从声明中删除依赖项数组：

angular
   .module('AppName')
   .controller(..);

Answer 3

您在每个控制器文件中多次定义角度应用程序

您应该在单独的外部JS文件中定义应用程序。在包含任何其他控制器JS文件之前，请确保首先包含该文件。

AngularJS无法识别单个HTML文件中的多个控制器

3 个答案: