AngularJS 不会识别单个 HTML 文件中的多个控制器答案

【问题标题】：AngularJS Won't Recognize Multiple Controllers in Single HTML FileAngularJS 不会识别单个 HTML 文件中的多个控制器
【发布时间】：2014-06-06 15:52:24
【问题描述】：

我发现了一个奇怪的实例，我试图在单个 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 肯定可以在一页上运行多个控制器——有什么诀窍？

谢谢！

【问题讨论】：

标签： html angularjs angularjs-scope angularjs-ng-repeat angularjs-controller

【解决方案1】：

您多次声明 Angular 应用，每个控制器一次。

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

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

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

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

下一个控制器文件：

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

你明白了....

【讨论】：

成功了；谢谢！但是，我怎么不能多次声明呢？
基本上只是因为 javascript（和大多数其他编程语言）就是这样工作的地方。大多数语言实际上完全不允许这样做。

【解决方案2】：

你应该只声明你的应用一次：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：