Question

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

我的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

Answer 1

一些事情：

1 /

＆＃39;]）＆＃39;缺少：

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

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

 }])

2 /我建议您使用文字编辑器，例如＆＃34; Sublime Text＆＃34;为你完成（）和[]。

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

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

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

 }])

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

4 /语法功能（$ scope）不是缩小安全的。 [＆＃39; $ scope＆＃39;，功能（范围）]是缩小安全的。

5 /会议代码：＆＃34; refreshButtonClicked＆＃34;以小写的第一个字母表示功能/方法。

Answer 2

感谢您的帮助。不过我认为问题在于角度NuGet包

安装包AngularJsSeed

安装角度的早期版本。如果有人能告诉我为什么早期版本不会让一个简单的应用程序工作，我会很感激。

角度控制器定义 - undefined不是函数

2 个答案: