为什么我的 Angular 控制器未定义？答案

【问题标题】：Why is my Angular controller undefined?为什么我的 Angular 控制器未定义？
【发布时间】：2014-07-22 18:19:49
【问题描述】：

我一直在关注一个教程，教科书向我保证这是可行的，但它正在轰炸

错误：[ng:areq] 参数“SimpleController”不是函数，得到未定义

为什么？我已经对它进行了棉绒，上下颠簸，我看不出有什么问题。为什么 SimpleController 出现未定义？

<html ng-app>
<head>
    <title>
    </title>
</head>
<body>
    <input type="text" ng-model="blah" />

    <div ng-controller="SimpleController">
        <h3>looping a data set</h3>
        <ul>
            <li ng-repeat="cust in customers | filter:blah | orderBy:'city'">
                {{cust.name | uppercase}} - {{cust.city | lowercase}}
            </li>
        </ul>
    </div>

    <script src="angular.js"></script>
    <script>
        function SimpleController($scope)
        {
            $scope.customers = [
                {name: 'John Smith', city: 'Phoenix'},
                {name: 'Jane Smith', city: 'Pittsburgh'},
                {name: 'John Doe', city: 'New York'},
                {name: 'Jane Doe', city: 'Los Angeles'}
            ];
        }
    </script>
</body>
</html>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

我的猜测是您使用的 angular.js 版本是 1.3.0-beta.15 或更高版本。

1.3.0-beta.15 中有一个重大更改：默认情况下，angular 将不再在 window 上查找控制器。更多详情请见3f2232b5：

With the exception of simple demos, it is not helpful to use globals
for controller constructors. This adds a new method to `$controllerProvider`
to re-enable the old behavior, but disables this feature by default.

BREAKING CHANGE:
`$controller` will no longer look for controllers on `window`.
The old behavior of looking on `window` for controllers was originally intended
for use in examples, demos, and toy apps. We found that allowing global controller
functions encouraged poor practices, so we resolved to disable this behavior by
default.

To migrate, register your controllers with modules rather than exposing them
as globals:

因此，您的代码应该可以正常工作，就像教科书所保证的 angular.js 版本早于 1.3.0-beta.15。

【讨论】：

【解决方案2】：

您需要创建一个应用并将其注册到该应用，如下所示：

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

myApp.controller('SimpleController', ['$scope', function($scope) {
  $scope.customers = [
            {name: 'John Smith', city: 'Phoenix'},
            {name: 'Jane Smith', city: 'Pittsburgh'},
            {name: 'John Doe', city: 'New York'},
            {name: 'Jane Doe', city: 'Los Angeles'}
        ];
}]);

在你的 html 中：

<html ng-app="myApp">

plunker 中的完整示例：http://plnkr.co/edit/tBwjJU3tc6tVc599RVFR?p=preview

【讨论】：

【解决方案3】：

<html ng-app="app">
<head>
    <title>
    </title>
</head>
<body>
    <input type="text" ng-model="blah" />

    <div ng-controller="SimpleController">
        <h3>looping a data set</h3>
        <ul>
            <li ng-repeat="cust in customers | filter:blah | orderBy:'city'">
                {{cust.name | uppercase}} - {{cust.city | lowercase}}
            </li>
        </ul>
    </div>

    <script src="angular.js"></script>
  <script>
var app = angular.module('app',[]);
app.controller('SimpleController', function($scope)
        {
            $scope.customers = [
                {name: 'John Smith', city: 'Phoenix'},
                {name: 'Jane Smith', city: 'Pittsburgh'},
                {name: 'John Doe', city: 'New York'},
                {name: 'Jane Doe', city: 'Los Angeles'}
            ];
        } )
    </script>
</body>
</html>

【讨论】：