96

我注意到这里被问了几次同样的问题，我试着解决它，但没有任何帮助。

我正在关注本教程的蛋头视频。

但是当我进入控制器和控制器之间共享数据部分时，我无法让它工作。

当我使用 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" };
}
4

16 回答 16

109

您的 html 中有 2 个未命名ng-app的指令。
在你的 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/

于 2013-10-16T15:54:19.417 回答
97

我得到了完全相同的错误消息，在我的情况下，我没有在我的 index.html 中列出控制器 JS 文件（例如 first-ctrl.js）

于 2014-09-18T17:32:19.690 回答
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却没有。

于 2015-03-30T12:39:05.907 回答
7

你必须命名你的ng-app，给你的应用一个命名空间；仅仅使用ng-app 是不够的。

代替：

<html ng-app>
...

您将需要这样的东西：

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

然后，像这样：

var app = angular.module("app", []).controller("ActionsController", function($scope){});
于 2014-12-08T19:21:34.967 回答
6

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

// 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。

于 2016-01-22T14:42:07.763 回答
3

删除 ng-app="" 从

<div ng-app="">

并简单地做到

<div>
于 2013-10-16T15:54:37.740 回答
1

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

于 2015-06-03T05:02:49.950 回答
1

我遇到了这个问题，并通过以下方式修复：

  1. 首先从以下位置删除 ng-app：

    <html ng-app>

  2. 将 ng-app 的名称添加到 myApp：

    <div ng-app="myApp">

  3. 在函数之前添加这行代码： 

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

脚本的最终外观：

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

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}
于 2015-08-26T09:27:56.007 回答
1

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

于 2016-01-27T18:59:36.097 回答
1

如果您将 gulp 配置错误以多次添加 Angular 应用程序代码，则可能会发生这种情况。就我而言，这是在 index.js 中，它在我的控制器声明之前和之后将它添加为 js 文件目录的一部分（在 gulp 中）。一旦我为 index.js 添加了一个排除项，不要第二次缩小和注入，我的应用程序就开始工作了。如果上述任何解决方案都不能解决您的问题，则另一个提示。

于 2016-12-05T22:17:37.720 回答
1

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

您需要将模块名称提供给 Angular 模块。使用定义模块也有区别 1. angular.module("firstModule",[]) 2. angular.module("firstModule")

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

于 2018-07-12T04:51:51.930 回答
0

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

ctrlSub.execSummaryDocuments = function(){};
于 2015-07-29T15:53:22.783 回答
0

有时函数内部代码的语法有问题会引发此错误。正确检查您的功能。在我的情况下，它发生在我试图为 Json 字段分配值并使用冒号 : 进行分配而不是等号 = ...

于 2015-11-05T07:30:39.803 回答
0

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

于 2016-02-16T02:27:08.477 回答
0

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

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

希望有帮助。

于 2016-02-23T12:11:54.863 回答
0

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

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

当我命名控制器时

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

它们都应该被一致命名，在这种情况下 Forgot p wdController 用小写 p。

于 2016-04-09T00:15:24.670 回答