为什么 Angular 看不到我的控制器？答案

【问题标题】：Why is Angular not seeing my controller?为什么 Angular 看不到我的控制器？
【发布时间】：2015-06-24 06:26:47
【问题描述】：

作为一个 Angular 新手，我正忙于学习教程，并且已经到了引入控制器的地步。我的 MVC 视图正在生成以下标记：

<script>
    function PersonController($scope) {
        $scope.persons = [
            { firstName: 'Brady', lastName: 'Kelly' },
            { firstName: 'James', lastName: 'Brown' },
            { firstName: 'Charles', lastName: 'Manson' }
        ];
    }
</script>
<table class="table" data-ng-controller="PersonController">
    <tr>
        <th>
            <span>Last Name</span>
        </th>
        <th>
            <span>First Name</span>
        </th>
        <th></th>
    </tr>

    <tr data-ng-repeat="pers in persons | orderBy:'lastName'">
        <td>
            {{pers.lastName}}
        </td>
        <td>
            {{pers.firstName}}
        </td>
        <td></td>
    </tr>
</table>

当我使用ng-init 指令来实例化人员数组“内联”时，例如：

<table class="table" data-ng-init="persons=[....]">

表中的数据绑定有效，但是当我使用 ng-controller 指令时，如上面的示例所示，我在 Chrome 的控制台中收到错误消息：

错误：[ng:areq] 参数 'PersonController' 不是函数，得到未定义

【问题讨论】：

你能展示你的完整代码吗
同样的错误stackoverflow.com/questions/24929296/…
请注意，angular 控制器与asp.net MVC 控制器非常不同。
看看@sal niro 的回答，你错过了angular.module().controller()的电话
谢谢@Martijn，我很清楚这种差异，而且我的服务器端控制器没有问题。

标签： javascript html asp.net-mvc angularjs asp.net-mvc-5

【解决方案1】：

您似乎需要以不同的方式定义您的控制器。我在您的示例中没有看到 app 定义，因此请确保您有如下所示的内容，然后将您的控制器链接到 app

<html ng-app="app">

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

app.controller('PersonController', ['$scope', function ($scope) {
    $scope.persons = [
        { firstName: 'Brady', lastName: 'Kelly' },
        { firstName: 'James', lastName: 'Brown' },
        { firstName: 'Charles', lastName: 'Manson' }
    ];
}]);

【讨论】：

ng-app 一定在那儿，看看他得到的错误。
@Werlang 你是对的，我也这么认为。可能最好将其从答案中剔除以更准确地定位问题
完全正确，@Werlang，我确实有一个 <html data-ng-app="">。我敢肯定，如果没有那个，我的初始数据绑定，如果没有控制器，就不会工作。
谢谢@salniro，看来我需要ng-app="app"，而我以前只有ng-app=""，然后是你定义控制器的风格而不是简单的函数声明。
@ProfK 太棒了！我也会回滚我之前的编辑，所以答案是完整的。你肯定会想以这种方式定义你的控制器，所以如果你最终缩小你的脚本，你不会有任何问题

【解决方案2】：

你需要定义你的 Angular js 模块并在 PersonController 中注入 $scope。

<script>
        angular.module('app', []);
        function PersonController($scope) {
            $scope.persons = [
                { firstName: 'Brady', lastName: 'Kelly' },
                { firstName: 'James', lastName: 'Brown' },
                { firstName: 'Charles', lastName: 'Manson' }
            ];
        }
        PersonController.$inject = ['$scope'];
    </script>

【讨论】：