Question

将AngularJS与Scala Play一起使用，我收到此错误。

错误：参数'MainCtrl'不是函数，未定义

我正在尝试创建一个包含一周中几天的表格。

请查看我的代码。我检查了控制器的名称，但这似乎是正确的。注意：此SO answer

中使用的代码

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());

Answer 1

从模块

的名称（[myApp]）中删除[]

angular.module('myApp', [])

并将ng-app="myApp"添加到html中，它应该可以正常工作。

Answer 2

<强> FIRST。检查路由定义中是否有正确的controller，与您定义的控制器名称相同

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

此示例中的不同控制器名称将导致错误，但此示例是正确的

SECOND 检查您是否导入了javascript文件：

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

Answer 3

我有相同的错误消息（在我的情况下：“参数'languageSelectorCtrl'不是函数，未定义”）。

经过与Angular种子代码的一些乏味比较后，我发现我之前删除了对app.js中控制器模块的引用。（发现在https://github.com/angular/angular-seed/blob/master/app/js/app.js）

所以我有这个：

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

这失败了。

当我添加缺少的参考文献时：

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

错误消息消失，Angular可以再次实现控制器。

Answer 4

有时这个错误是html中指定的两个 ng-app指令的结果。在我的情况下，我错误地在我的ng-app标记中指定了html，在ng-app="myApp"标记中指定了body，如下所示：

<html ng-app>
  <body ng-app="myApp"></body>
</html>

Answer 5

这严重花了我4个小时（包括对SO的无休止搜索）但最终我发现了它：错误（无意中）我在某处添加了一个空格。

你能发现它吗？

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

所以...... 4个小时后，我发现它应该是：

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

几乎不可能只用肉眼看到。

这强调了修订控制（git或其他）和单元/回归测试的重要性。

Answer 6

我遇到了同样的问题，在我的情况下，这是由于这个问题而发生的：

我将控制器定义在一个单独的模块中（称为“myApp.controllers”）并注入主应用程序模块（称为“myApp”），如下所示：

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

一位同事在一个单独的文件中推送了另一个控制器模块，但名称与我的完全相同（即'myApp.controllers'）导致了这个错误。我认为因为Angular在这些控制器模块之间感到困惑。但是，错误消息对于发现问题并没有多大帮助。

Answer 7

在我的情况下（有一个概述页面和一个“添加”页面）我通过下面的路由设置得到了这个。它正在为无法注入的AddCtrl提供消息......

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

由于when('/'路由，我的所有路由都进入概览，并且无法在/ add路由页面呈现上匹配控制器。这很令人困惑，因为我看到了add.html模板但其控制器无处可寻。

删除'/' - 路由时，案例为我解决了这个问题。

Answer 8

Уmed的第二点是我的陷阱，但仅仅是为了记录，也许它在某个地方帮助某人：

我遇到了同样的问题，就在我疯了之前，我发现我忘了包含我的控制器脚本。

由于我的应用程序基于ASP.Net MVC，我决定通过在 App_Start / BundleConfig.cs

中插入以下代码段来保持自己的理智。

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

并在 Layout.cshtml

中

<head>
...
   @Scripts.Render("~/app")
...
</head>

现在我不必考虑再次手动包含文件。事后我确实应该在设置项目时这样做......

Answer 9

如果您在子模块中，请不要忘记在主应用程序中声明该模块。即：

<table>
  <tr>
    <td>
      <label>Employee:</label>
    </td>
    <td>
      <label id="lblId">Id</label>
        <input type="text" id="txtId " />
        <label id="lblDesig">Designation</label>
      <input type="text" id="txtDesig" />
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <label id="Label3">Mail</label>
                <input type="text" id="Text3 " />
                 <label id="Label4 ">Ext</label>
      <input type="text" id="Text4" />
    </td>
  </tr>
  <tr>
    <td>
      <label>Personal Info:</label>
    </td>
    <td>
      <label>Name:</label>
      <input type="text" id="txtName" />
    </td>
  </tr>
  <tr>
    <td>

    </td>
    <td>
      <label>City:</label>
      <input type="text" id="txtCity" />
    </td>
  </tr>
  <tr>
    <td>

    </td>
    <td>
      <label>State:</label>
      <input type="text" id="txtState" />
    </td>
  </tr>
</table>

如果你没有在mainApp中声明subModule1，你会得到一个“[ng：areq] Argument”MyController“不是函数，未定义。

Answer 10

我遇到了同样的错误：

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

你知道吗？我忘记了第一个$ scope的''，正确的语法当然是：

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

我没有立即看到的第一个错误是：“ $ scope未定义”，后跟“错误：[ng：areq] Argument'TreeEditStepControlsCtrl'不是函数，未定义“

Answer 11

我在LoginController中得到了理智的错误，我在主index.html中使用了它。我找到了两种解决方法：

设置$ controllerProvider.allowGlobals（），我在Angular change-list中找到了评论 “此选项可能对迁移旧应用程序很方便，但请不要在新应用程序中使用它！”关于Angular的原始评论

app.config（['$ controllerProvider'，function（$ controllerProvider）{ $ controllerProvider.allowGlobals（）; }]）;
注册控制器的错误构造

前

LoginController.$inject = ['$rootScope', '$scope', '$location'];

现在

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

'app'来自app.js

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);

Answer 12

这可能就像将资产封入＆＃34; ＆＃34;以及内部需要的任何报价＆＃39; ＆＃39;？

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

变为

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

这可能会导致解析一些问题

Answer 13

要解决这个问题，我必须发现我在Angular路线声明中错误拼写了控制器的名称：

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

Answer 14

原来这是浏览器的缓存，在这里使用Chrome。只需检查Inspect（元素）下的“禁用缓存”即可解决我的问题。

Answer 15

因为在尝试找到以下答案时会在Google中弹出：“错误：参数”不是一个函数，未定义”。

您可能试图两次创建相同的模块。

angular.module是用于创建，注册和注册的全局位置   检索AngularJS模块。

传递一个参数将检索现有的angular.Module，而   传递多个参数会创建一个新的angular.Module

来源：https://docs.angularjs.org/api/ng/function/angular.module#overview

示例：

angular.module('myApp', [])用于创建模块而不注入任何依赖项。

angular.module('myApp')（不带参数）用于获取现有模块。

Answer 16

似乎有许多可行的解决方案表明该错误有许多实际原因。

就我而言，我没有在app/index.html中声明控制器：

<scipt src="src/controllers/controller-name.controller.js"></script>

错误消失了。

Answer 17

就我而言，这是<script src="assets/javascript/controllers/questionssIndexController.js"></script>中的一个简单错字：

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

应该是

在控制器名称中没有额外的FUNCTION user_salt_get("@username" character varying)。

错误：参数不是函数，未定义

17 个答案: