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

120

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

angularjs playframework

— 凯文·梅瑞迪斯（Kevin Meredith）
source

15

在您使用过的HTML中，ng-app可以将其更改为ng-app=myApp

— Chandermani

@Chandermani遇到了同样的错误

— Kevin Meredith

您是否尝试过从代码中删除闭包（IIFE）？当我遇到这个问题时，这是因为我的JavaScript发生了PHP错误。

— 凯文·比尔

1

您可以通过以下清单找出问题所在：stackoverflow.com/a/26797874/930170

— Sergei Panfilov 2014年

确认是否已在BundleConfig.cs文件中添加了MainCtrl.controller.js

— Syed Mohamed

107

[]从模块名称（[myApp]）中删除

angular.module('myApp', [])

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

— 尚德马尼
source

1

我要做的只是第二个建议（即设置ng-app =“ myApp”）。如果删除[]，则会出现另一个错误。

— 杰森

15

具有第二个参数[]表示您正在创建一个新模块。删除第二个参数表示您正在检索现有模块。因此，一种可能的检查方法是angular.module两次调用，两次都包含第二个参数。如果是这样，则后面的事件将覆盖第二个事件，从而隐藏到此为止的所有控制器定义。

— 卡尔·G

26

当他说要删除时，[]他指的是OP所具有的第一个参数，[myApp]而不是myApp。他不是在谈论第二个参数。

— 凯文·比尔2013年

1

如果使用路由，请检查控制器的名称。路由定义中的控制器名称区分大小写。

— 拉丁勇士

78

第一。 检查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>

— 佩勒罗克
source

30

以我的经验，您的“第二”始终是问题所在。我经常忘记将控制器导入index.html

— msanford 2014年

这也是我的第二个案例，忘记了导入JS文件...

— Saurabh Misra

26

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

与Angular Seed的代码进行了一些乏味的比较之后，我发现我之前已经删除了app.js中对controllers模块的引用。（将其放在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可以再次实例化控制器。

— 贝特朗
source

有同样的问题，我的问题是我忘记将控制器添加到应用程序模块中...为什么这不会自动发生？？？谢谢你！

— TheZuck

16

有时，此错误是由html中指定的两个 ng-app指令导致的。在我的情况下误我指定ng-app我的html标签，并ng-app="myApp"在body这样的标签：

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

— 高拉夫
source

1

当我没有将注入添加到myApp模块时，这发生在我身上。

— Ghandhikus '16

谢谢！这解决了我的问题。

— bradden_gross 16/12/13

6

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

你能发现吗？

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

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

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

肉眼几乎看不到。

这强调了版本控制（git或其他）和单元/回归测试的至关重要。

— 狮子座
source

1

我的回答不是多余的空间，但它使我得以解决。我Controller不是controller那全花了。

— Grandizer

然后我将文件命名为options-moda.controller.js，但一直在寻找options-modal.controller.js DOH！

— theFish

我的原因是我忘了在BundleConfig中添加.js。简单但令人沮丧。

— Ege Bayrak，

4

我遇到了同样的问题，在我看来，这是由于此问题而发生的：

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

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

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

— 莉拉·埃利（Lilla Eli）
source

1

应该通过删除模块中的第二个参数来解决此问题。即angular.module（'myApp'）。contoller（...）

— Santhosh 2014年

3

就我而言（具有概述页面和“添加”页面），我通过以下路由设置获得了此功能。它给出了无法插入的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路线页面渲染中无法匹配控制器。这令人困惑，因为我DID看到了add.html模板，但是找不到控制器。

当案例解决了我这个问题时，删除“ /”路由。

— 易凯
source

我也收到了此错误，并且将头发扯掉了，因为这导致我的TFS构建失败。注释掉“ /”路由也为我修复了它。现在找出原因！

— 菲利普·科普利2016年

3

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

<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”不是一个函数，未定义。

— 公正
source

2

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

现在，我不必再考虑手动添加文件了。事后看来，我在设置项目时确实应该这样做。

— Xceno
source

1

我在主要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']);

— 德米特里·阿尔加津（Dmitri Algazin）
source

1

我有一个相同的错误，但有一个大错误：

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

}]);

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

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

}]);

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

— 埃洛
source

0

就像将您的资产包含在“”中一样简单，并且内部需要用引号引起来吗？

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

变成

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

那可能会引起一些解析问题

— 杰伊·汤姆
source

0

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

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

— 疯狂医师
source

0

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

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

那应该是

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

s控制器名称中没有多余的内容。

— 涡流
source

0

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

— 郭卫辉
source

0

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

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

angular.module是创建，注册和检索AngularJS模块的全球场所。

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

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

例：

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

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

— 麦克拉德
source

0

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

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

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

错误消失了。

— 泰·康威
source