AngularJS错误：“参数'FirstCtrl'不是函数，未定义”

93

我注意到在这里问了几次同样的问题，我尝试过解决这个问题，但是没有帮助。

我正在学习带蛋头视频的本教程。

但是，当我进入“控制器和在控制器之间共享数据”部分时，我无法正常工作。

当我使用Chrome运行它时，在控制台中出现以下错误：

“参数“ FirstCtrl”不是函数，未定义”。

我真的不知道怎么了代码与教程中的相同。

的HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— 蓬巴
source

这里是第二评论的解决方案- stackoverflow.com/questions/24894870/...

— 坎

108

您ng-app的html中有2个未命名的指令。
在您的div中丢掉一个。

更新
让我们尝试另一种方法。
在您的js文件中定义一个模块，并将ng-app指令分配给它。之后，将控制器定义为ng组件，而不是简单的功能：

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

和js部分：

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

这是一个在线演示，它就是这样做的：http : //jsfiddle.net/FssbL/1/

— gion_13
source

非常感谢您的回答，可悲的是我仍然遇到同样的错误。.因此我从div中丢失了ng-app =“”，但仍然无法正常工作。

— Pumba

1

非常感谢你的帮助！我已经不明白了，我所做的和您在此处以及在线演示中所做的完全一样，但是它仍然显示“ FirstCtrl”是未定义的。我将从头开始再次尝试，希望它能正常工作，因为在接下来的教程中，我会遇到相同的问题。

— Pumba

大！！有用。我忘记关闭js文件的脚本标签上的type属性。并与您的第二个解决方案相结合，使它可行！非常感谢:)）

— Pumba

6

演示视频未将控制器包装在模块内。那为什么对他有效，但对我却无效？egghead.io/lessons/angularjs-controllers

— Demodave 2014年

2

@Demodave，我有同样的问题。我假设视频是在AngularJS的早期版本中录制的，因此定义控制器可能不太严格（但是，这只是我的假设，我很高兴有人确认或否认）

— MandM 2015年

93

我得到了完全相同的错误消息，以我为例，结果发现我没有在index.html中列出控制器JS文件（例如first-ctrl.js）。

— 马吕斯
source

1

您是什么意思，您没有列出控制器js文件？您是说您没有包括吗？

— Demodave 2014年

@DavidStone是的-那是我的情况。

— Mariusz 2014年

另一个noob错误：控制器中的圆括号等可能导致控制台中显示相同类型的错误。

— user2938649 '16

9

我刚刚完成了本教程，并遵循了@ gion_13的答案。仍然没有用。通过使索引中的ng-app名称与js文件中的名称相同来解决此问题。完全相同，甚至引号也一样。所以：

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

和js：

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

奇怪ng-app必须一样，但是ng-controller却不一样。

— an1waukoni
source

这花了我

— 四个

7

您必须命名您的ng-app，为您的应用程序命名空间；仅仅使用ng-app 是不够的。

代替：

<html ng-app>
...

您将需要如下所示：

<html ng-app="app">
...

然后，像这样：

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— 用户名
source

5

另一个不错的选择：意外地重新定义模块。我今天早些时候太急切地复制/粘贴了一些东西，最后在某个地方有一个模块定义，以至于我用控制器定义覆盖了：

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

然后在我的定义中，我应该这样引用它：

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

相反，我所做的是：

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

请注意对的调用中的额外括号angular.module。

— 迈克尔·杰斯
source

3

从中删除ng-app =“”

<div ng-app="">

并简单地做到

<div>

— 约翰·史密斯
source

3

如果您在应用程序的配置中使用路由，请确保不要在html中使用ng-controller。您应该改为具有ng-view。通常将与路径中的视图一起定义控制器。

— 2014年

1

我也面临同样的问题。但是问题是我忘了在ng-app依赖的模块列表中列出该模块。

3

这应该是评论，而不是答案。

— 安东尼·佩罗

1

我已经遇到了这个问题，并通过以下方式解决了这个问题：

首先从以下位置删除ng-app：
```
<html ng-app>
```
将ng-app的名称添加到myApp：
```
<div ng-app="myApp">
```

在函数之前添加以下代码行：

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

脚本的最终外观：

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— 阿扎尔
source

1

就我而言，此消息来自主模块中被遗忘的依赖项注入

— 托马斯·戈伯特
source

1

如果您多次错误地配置了gulp来添加您的角度应用程序代码，则可能会发生这种情况。就我而言，这是在index.js中，并将其添加到控制器声明前后的js文件目录中（在gulp中）。一旦添加了一个不会最小化index.js的排除项并第二次注入，我的应用程序便开始工作。如果上述任何解决方案都不能解决您的问题，请提示另一个技巧。

— rncrtr
source

1

首先-如果未定义模块名称，则在JS中您将无法访问模块并将控制器链接到该模块。

您需要提供模块名称给角度模块。使用定义模块也有区别。1. angular.module（“ firstModule”，[]）2. angular.module（“ firstModule”）

1-一个声明新模块“ firstModule”，而第二个参数中未添加任何依赖项。2-这是使用在其他地方初始化的“ firstModule”，并且您正在尝试获取初始化的模块并对其进行修改。

— 伊桑·库玛（Eshaan Kumar）
source

0

我遇到了这个问题，但是我能够通过重命名控制器来解决此问题，请尝试一下。

ctrlSub.execSummaryDocuments = function(){};

— 阿迈·库尔卡尼（Amay Kulkarni）
source

0

有时函数内部代码的语法中有错误会引发此错误。正确检查您的功能。就我而言，当我尝试为Json字段分配值并使用冒号：进行赋值而不是等号= ...时，发生了这种情况

— 阿米特什·兰詹（Amitesh Ranjan）
source

0

我在两个不同的javascript文件中定义了两个具有相同名称的控制器。恼人的角度无法给出更清晰的错误消息，指出名称空间冲突。

— Thebiggestlebowski
source

0

我不确定本教程，但是当我忘记将文件包含在grunt / gulp最小化过程中时，我遇到了同样的问题。

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

希望能有所帮助。

— 帕特里克·比戈（Patrik Bego）
source

0

还要注意您的字母大小写。我花了一个小时来追踪这个错误。

<section id="forgotpwd" ng-controller="ForgotPwdController">

当我命名控制器时

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

它们都应统一命名，在本例中为Forgot p wdController，小写为p。

— 杰森·玛塔嘉雅
source