app.js

Question

我们如何在角度JS中定义一个函数我正在尝试一个函数，但当我加载我的页面时，它在控制台SimpleController()中说不是一个函数。可能我正在做一些语法错误

HTML

<div ng-app>

 name: <input type="text" ng-model="name">

 <div ng-controller="SimpleController">
    <ul>
        <li ng-repeat="custName in customers | filter: name | orderBy:name">{{ custName.name }} - {{ custName.city | uppercase}} - {{ custName.address }}</li>
    </ul>
 </div>
</div>

我的Contorller

function SimpleController($scope){

        $scope.customers = [

            {
                name:'John Doe',
                city:'Aurora',
                address:'Dickenson'
            },
            {
                name:'Daniel Pervaiz',
                city:'Denver',
                address:'Country Lane'
            },
            {
                name:'Arooj Paul',
                city:'Jesu',
                address:'Green Valley'
            }

        ];

    }

Answer 1

var myApp = angular.module('myApp', []);

myApp.controller('SimpleController', ['$scope', function($scope) {
       $scope.customers = [
            {
                name:'John Doe',
                city:'Aurora',
                address:'Dickenson'
            },
            {
                name:'Daniel Pervaiz',
                city:'Denver',
                address:'Country Lane'
            },
            {
                name:'Arooj Paul',
                city:'Jesu',
                address:'Green Valley'
            }

        ];
    
}]);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example8-production</title>  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    
</head>
<body ng-app="myApp">

  name: <input type="text" ng-model="name">

 <div ng-controller="SimpleController">
    <ul>
        <li ng-repeat="custName in customers | filter: name | orderBy:name">{{ custName.name }} - {{ custName.city | uppercase}} - {{ custName.address }}</li>
    </ul>
 </div>

</body>
</html>

不确定您的控制器是否正确定义。

AngularJS controller and methods

同时确保正确宣布ng-App。

<div ng-app="myApp">

Answer 2

Angular依赖于模块的概念。确保您的应用结构如下：

app.js

angular.module('the_name_of_my_app', [
    'ionic', 
    'ngMaterial',
    'the_name_of_my_app.controllers', 
    'the_name_of_my_app.services',
    'the_name_of_my_app.directives'
]
)

.run(function( /* Inject whatever is needed */ ) {

}
.config.run(function( /* Inject any Provider, and routes definitions */ ) {

});

controllers.js

 angular.module('the_name_of_my_app.controllers', [])  

.controller('SimpleController', [
    '$scope',
    '$rootScope', // another dependency injection example
    '$mdDialog', // another dependency injection example
    '$timeout',// another dependency injection example
    function
    (
    $scope,
    $rootScope, // another dependency injection example
    $mdDialog, // another dependency injection example
    $timeout // another dependency injection example
    ) 
    {
...

    }]) 

.controller('AnotherController', [  // ...

的index.html

您还需要在视图中引用您的应用：

<div ng-app="the_name_of_my_app">

Answer 3

如果你没有注册你的控制器，它在Angular 1.4.9上会是这样的：

angular.js:12722 Error: [ng:areq] Argument 'SimpleController' is not a function, got undefined

这是关于Angular 1.0.8：

angular.js:5930 Error: Argument 'SimpleController' is not a function, got undefined

您的错误显示SimpleController()这一事实告诉我您的问题中的代码可能不对您的错误负责（或者使用我未尝试过的Angular版本 - 我尝试了最旧和最新版本可在plnkr.co上找到。

要解决此问题，您应该：

清除浏览器缓存。
确保您的ng-app（或您用于引导程序的任何内容）指定了正确的主模块 - 看起来您出于某种原因没有问题？
确保您查找的源目录与服务静态内容的服务器目录匹配。
在源目录中搜索SimpleController的所有实例 - 由于ng-controller，它看起来可能位于使用()指令的视图上下文之外（或不同版本的Angular，格式不同的消息）。

我们如何使用Angular JS在控制器中定义一个函数

3 个答案:

app.js

controllers.js

的index.html