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

Question

在 Scala Play 中使用 AngularJS，我收到了这个错误。

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

我正在尝试创建一个包含星期几的表。

请看一下我的代码。我检查了控制器的名称，但这似乎是正确的。注意：此 SO答案中使用的代码

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"]
        }
    });
}());

score 108 · Accepted Answer

[]从模块的名称 ([myApp]) 中删除

angular.module('myApp', [])

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

score 78 · Accepted Answer

第一的。 检查您的路由定义是否正确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';
    }]);

这个例子中不同的控制器名称会导致错误，但是这个例子是正确的

第二次检查您是否已导入您的 javascript 文件：

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

score 26 · Accepted Answer

我有同样的错误信息（在我的例子中：“参数'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 可以再次实例化控制器。

score 16 · Accepted Answer

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

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

score 6 · Accepted Answer

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

你能发现吗？

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

所以...... 4小时后我看到它应该是：

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

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

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

score 4 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

就我而言（有一个概述页面和一个“添加”页面），我通过如下的路由设置得到了这个。它正在为无法注入的 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 模板，但找不到它的控制器。

在案例为我解决此问题时删除“/”路由。

score 3 · Accepted Answer

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

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

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

score 2 · Accepted Answer

У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>

现在我不必再考虑手动包含文件了。事后看来，我真的应该在设置项目时这样做......

score 1 · Accepted Answer

我在主 index.html 中使用的 LoginController 出现了正常错误。我找到了两种解决方法：

设置 $controllerProvider.allowGlobals()，我发现 Angular更改列表中的注释 “此选项可能对迁移旧应用程序很方便，但请不要在新应用程序中使用它！” 对 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']);

score 1 · Accepted Answer

我犯了同样的错误，但犯了一个大错误：

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

}]);

你看？我忘记了第一个 $scope 周围的 ''，正确的语法当然是：

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

}]);

我没有立即看到的第一个错误是：“ $scope is not defined ”，然后是“ Error: [ng:areq] Argument 'TreeEditStepControlsCtrl' is not a function, got undefined ”

score 0 · Accepted Answer

是否可以像将您的资产包含在“”中一样简单，并且任何需要在内部加上“”的引号？

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

变成

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

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

score 0 · Accepted Answer

为了解决这个问题，我不得不发现我在 Angular 路由的声明中拼错了控制器的名称：

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

score 0 · Accepted Answer

就我而言，这是一个简单的错字index.html：

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

那应该是

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

没有额外s的控制器名称。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

因为当试图找到答案时，谷歌会弹出这个窗口：“错误：参数''不是函数，未定义”。

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

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

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

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

例子：

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

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

score 0 · Accepted Answer

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

就我而言，我没有在以下位置声明控制器app/index.html：

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

错误消失了。

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

17 回答 17

Related

Reference