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

AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined'

本文关键字：一个 未定义 函数 错误 参数 FirstCtrl AngularJS      更新时间：2023-09-26

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

我正在按照本教程播放蛋头视频。

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

当我使用 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>

主.js

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

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/

我收到了完全相同的错误消息，就我而言，事实证明我没有在我的index.html

我

只是做了本教程并遵循了@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控制器却没有。

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

而不是：

<html ng-app>
...

您将需要这样的东西：

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

然后，像这样：

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

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

// 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 中的额外括号。

从中删除

ng-app="

<div ng-app="">

并简单地制作它

<div>

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

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

  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"};
}

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

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

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

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

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

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

ctrlSub.execSummaryDocuments = function(){};

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

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

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

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

希望有帮助。

还要注意你的信封。我花了一个小时追逐这个错误。

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

当我命名控制器时

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

它们都应该一致地命名，在这种情况下，忘记了带有小写 p 的 wdController 。

相关文章：