角度控制器定义 - 未定义不是函数答案

【问题标题】：Angular controller definition - undefined is not a function角度控制器定义 - 未定义不是函数
【发布时间】：2014-04-23 09:43:39
【问题描述】：

我是 Angular 新手，但在设置我的第一个应用程序时遇到问题。

我的 app.js 中有以下代码：

// Declare app level module which depends on filters, and services
angular.module('DiagsDashboard', ['DiagsDashboard.filters', 'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);

还有controller.js：

'use strict';

angular.module('DiagsDashboard.controllers', [])
   .controller('EventCtrl', ['$scope', function (scope) {

       scope.refreshButtonClicked = function () {
           console.log("clicked!");
       }
   }])

然而，当我在 angular.module 上设置断点时，控制器函数并没有定义。

标记（MVC 剃刀）：

@{
    Layout = "~/Views/Shared/_LayoutAngular.cshtml";
}

<div ng-app>
    <div ng-controller="EventCtrl">
        <button ng-click="refreshButtonClicked">Refresh</button>
    </div>
</div>

生成以下 HTML：

    <!doctype html>
<html ng-app="DiagsDashboard">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="/css/app.css" />
</head>
<body>
    <ul class="menu">
        <li><a href="#/view1">view1</a></li>
        <li><a href="#/view2">view2</a></li>
    </ul>





<div ng-controller="EventCtrl">
    <button ng-click="refreshButtonClicked()">Refresh</button>
</div>



    <div>Angular seed app: v<span app-version></span></div>

    <script src="../lib/angular/angular.js"></script>
    <script src="../js/app.js"></script>
    <script src="../js/services.js"></script>
    <script src="../js/controllers.js"></script>
    <script src="../js/filters.js"></script>
    <script src="../js/directives.js"></script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"9f508d482b7a4ca2aca44a79b147fcec"}
</script>
<script type="text/javascript" src="http://localhost:13686/72a9c7832dd448f9b586b7c0f340112b/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

在 Chrome 中，开发者控制台显示如下：

  Uncaught TypeError: undefined is not a function controllers.js:4
Error: Argument 'EventCtrl' is not a function, got undefined
    at assertArg (http://localhost:63599/diagsdashboard/lib/angular/angular.js:954:17)
    at assertArgFn (http://localhost:63599/diagsdashboard/lib/angular/angular.js:962:3)
    at http://localhost:63599/diagsdashboard/lib/angular/angular.js:4699:9
    at http://localhost:63599/diagsdashboard/lib/angular/angular.js:4306:17
    at forEach (http://localhost:63599/diagsdashboard/lib/angular/angular.js:128:18)
    at compositeLinkFn (http://localhost:63599/diagsdashboard/lib/angular/angular.js:4285:11)
    at linkingFn (http://localhost:63599/diagsdashboard/lib/angular/angular.js:4002:14)
    at linkingFn (http://localhost:63599/diagsdashboard/lib/angular/angular.js:4005:12)
    at linkingFn (http://localhost:63599/diagsdashboard/lib/angular/angular.js:4005:12)
    at http://localhost:63599/diagsdashboard/lib/angular/angular.js:3905:24

【问题讨论】：

能否请您也添加您的标记？
添加了标记并由 benek 提出了改进建议。仍然没有运气，控制器功能仍然未定义。
尝试将您的 ng-app 设置为您的模块名称
更新为包含应用程序的名称。
不应该是ng-click="refreshButtonClicked()" 和() 吗？

标签： angularjs

【解决方案1】：

几件事：

'])' 不见了：

.controller('EventCtrl', ['$scope', function ($scope) {

  $scope.RefreshButtonClicked = function () {
      console.log("clicked!");
  }

 }])

2 / 我建议你使用像“Sublime Text”这样的文本编辑器来完成 () 和 []。

3/ 为了你的理解，你可以写：

.controller('EventCtrl', ['$scope', function (toto) {

  toto.refreshButtonClicked = function () {
      console.log("clicked!");
  }

 }])

Angular 只会考虑函数中参数的顺序，而不考虑名称。

4/ 语法函数($scope) 不是缩小安全的。 ['$scope', function(scope)] 是缩小安全的。

5/ 约定代码：“refreshButtonClicked”，函数/方法的第一个字母小写。

【讨论】：

谢谢，我已经做出了改进。

【解决方案2】：

感谢所有帮助。但是我认为问题在于角度 NuGet 包

安装包AngularJsSeed

安装早期版本的 Angular。如果有人能告诉我为什么早期版本无法让简单的应用程序运行，我将不胜感激。

【讨论】：