Question

我正在尝试学习AngularJs中的控制器和范围，但是当我运行此代码时，我总是得到这个Error: [ng:areq] Argument 'studentController' is not a function, got undefined。

<html >
<head>
    <title>AngularJs</title>
    <script src="script/angular.js"></script>
</head>
<body>
    <div ng-app="" ng-controller="studentController">
        <div class="container" >
            <input type="text" ng-model="name">
            <br>
            <h2>List name using ng-init and ng-repeat</h2>
            <ul>
                <li ng-repeat="cust in customers | filter : name | orderBy:'city' ">
                    {{ cust.name }} - {{ cust.city }}
                </li>
            </ul>
        </div>
    </div>


    <script>
        function studentController($scope) {
            $scope.customers = [
                {name : 'John Smit', city : 'Ifrane'},
                {name : 'Nurcan Turkey', city : 'Izmir'},
                {name : 'Laura Keller', city : 'Cologne'},
                {name : 'Sam Haimoura', city : 'Harhoura'},
                {name : 'Brayan Amid', city : 'Casablanca'}
            ];
        };
    </script>

</body>

即使这段代码是以某种方式直接来自教程。有人可以告诉我这段代码有什么问题

Answer 1

ng-app不应为空

<div ng-app="appname" ng-controller="StudentController">

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

Answer 2

<div ng-app="appname" ng-controller="StudentController">
var app = angular.module('appname', []);
app.controller('StudentController','');

Answer 3

<html>
<head>
    <title>AngularJs</title>
    <script src="script/angular.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="studentController">
        <div class="container" >
            <input type="text" ng-model="name">
            <br>
            <h2>List name using ng-init and ng-repeat</h2>
            <ul>
                <li ng-repeat="cust in customers | filter : name | orderBy:'city' ">
                    {{ cust.name }} - {{ cust.city }}
                </li>
            </ul>
        </div>
    </div>


    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('studentController', ['$scope', function($scope) {
            $scope.customers = [
                {name : 'John Smit', city : 'Ifrane'},
                {name : 'Nurcan Turkey', city : 'Izmir'},
                {name : 'Laura Keller', city : 'Cologne'},
                {name : 'Sam Haimoura', city : 'Harhoura'},
                {name : 'Brayan Amid', city : 'Casablanca'}
            ];
        }]);
    </script>

</body>

Answer 4

您使用的是哪种角度？对于角度1.3，您不能将全局函数用作控制器。您可以看到重大更改列表here

您可以使用allowGlobals（更多信息here）覆盖此行为，但我不推荐这样做。

Answer 5

上面的代码似乎在JSFiddle中运行得很好：http://jsfiddle.net/nde4m2ff/。

我认为问题可能是您在页面中过早地初始化angularjs。在定义function studentController() { }之后，尝试将角度脚本定义移动到最后。

Answer 6

尝试定义应用并使用其他符号，ng-app不应该为空，使用数组notation建议角色小组如下：

<html >
<head>
    <title>AngularJs</title>
    <script src="script/angular.js"></script>
</head>
<body>
    <div ng-app="myapp" ng-controller="studentController">
        <div class="container" >
            <input type="text" ng-model="name">
            <br>
            <h2>List name using ng-init and ng-repeat</h2>
            <ul>
                <li ng-repeat="cust in customers | filter : name | orderBy:'city' ">
                    {{ cust.name }} - {{ cust.city }}
                </li>
            </ul>
        </div>
    </div>

    <script>
    angular.module('myapp').controller('studentController', ['$scope',
        function($scope) {
        $scope.customers = [
                {name : 'John Smit', city : 'Ifrane'},
                {name : 'Nurcan Turkey', city : 'Izmir'},
                {name : 'Laura Keller', city : 'Cologne'},
                {name : 'Sam Haimoura', city : 'Harhoura'},
                {name : 'Brayan Amid', city : 'Casablanca'}
            ];
        }
    ]);
   </script>
</body>

角度控制器不能在1.3之后全局初始化

6 个答案: