Question

我正在忙着关注一个教程，作为一个总的Angular新手，并且已经达到了引入Controller的程度。我的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指令实例化人员数组'inline'时，例如：

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

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

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

Answer 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' }
    ];
}]);

Answer 2

您需要定义角度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>

为什么Angular没有看到我的控制器？

2 个答案: