Question

我在尝试从角度JS中的控制器功能列出内容时遇到以下错误。我是Angular JS的新手。我检查了一个视频教程和我自己尝试过的代码。我编写了与教程中相同的代码，但它显示了这个错误。无法理解导致这种情况的原因。

Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at file:///F:/Study/angular/angular.min.js:6:417
at Rb (file:///F:/Study/angular/angular.min.js:19:510)
at sb (file:///F:/Study/angular/angular.min.js:20:78)
at $get (file:///F:/Study/angular/angular.min.js:75:396)
at file:///F:/Study/angular/angular.min.js:57:100
at r (file:///F:/Study/angular/angular.min.js:7:408)
at B (file:///F:/Study/angular/angular.min.js:56:471)
at g (file:///F:/Study/angular/angular.min.js:51:335)
at g (file:///F:/Study/angular/angular.min.js:51:352)

我的代码如下 -

<head>
    <title>Angular ng-controller</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="simpleController">
        <input type="text" data-ng-model='name' />
        <ul>
            <li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        function SimpleController($scope) {
            $scope.customers = [{
                name: 'John Doe',
                city: 'Pheonix'
            }, {
                name: 'John Smith',
                city: 'New York'
            }, {
                name: 'Jane Doe',
                city: 'San Fransisco'
            }];
        }
    </script>
</body>

Answer 1

您必须将控制器注入应用程序模块。

为您的应用命名：

<html ng-app='myApp'>

注入控制器：

var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
    $scope.customers = [
        { name:'John Doe',city : 'Pheonix'},
        { name : 'John Smith',city: 'New York'},
        { name : 'Jane Doe',city : 'San Fransisco'}
    ];
}

Answer 2

除了函数名称拼写之外，对于小于1.3的角度版本，您的代码是绝对正确的。在你声明的时候调用它应该是data-ng-controller="SimpleController"。

您可以尝试包括以下cdn

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js

jsfiddle：http://jsfiddle.net/samirkumardas/3tt3p09h/

Answer 3

控制器simpleController应在角度应用下注册。

请参阅下面的工作代码。

＆＃13;

var app = angular.module('app', []);

app.controller('simpleController', function($scope) {
  $scope.customers = [{
    name: 'John Doe',
    city: 'Pheonix'
  }, {
    name: 'John Smith',
    city: 'New York'
  }, {
    name: 'Jane Doe',
    city: 'San Fransisco'
  }];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app'>
  <div data-ng-controller="simpleController">
    <input type="text" data-ng-model='name' />
    <ul>
      <li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
    </ul>
  </div>

</div>

＆＃13;

Answer 4

您的脚本中未定义angular.module。

   <head>
        <title>Angular ng-controller</title>
        <script type="text/javascript" src="angular.min.js"></script>
    </head>

    <body ng-app='filterApp'>
        <div ng-controller="simpleController">
            <input type="text" data-ng-model='name' />
            <ul>
                <li ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
            </ul>
        </div>


         <script type="text/javascript">
         var app = angular.module('filterApp', []);
         app.controller('SimpleController', function($scope) {
                       $scope.customers = [{
                        name: 'John Doe',
                        city: 'Pheonix'
                    }, {
                        name: 'John Smith',
                        city: 'New York'
                    }, {
                        name: 'Jane Doe',
                        city: 'San Fransisco'
                    }];
                }
            </script>
        </body>

Angular JS控制器抛出错误

4 个答案: