AngularJS 错误:’参数‘ FirstCtrl’不是函数，未定义’

小开

最佳答案

You have 2 unnamed ng-app directives in your html.
Lose the one in your div.

Update
Let's try a different approach.
Define a module in your js file and assign the ng-appdirective to it. After that, define the controller like an ng component, not as a simple function:

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

and the js part:

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

Here's an online demo that is doing just that : http://jsfiddle.net/FssbL/1/

小开

remove ng-app="" from

<div ng-app="">

and simply make it

<div>

小开

I got exactly the same error message and in my case it turned out i didn't list the controller JS file (e.g. first-ctrl.js) in my index.html

小开

You must name your ng-app, giving your app a namespace; simply using ng-app is not enough.

Instead of:

<html ng-app>
...

You will need something like this instead:

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

Then, like so:

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

小开

I just did this tutorial and followed @gion_13 answer. Still did not work. Solved it by making my ng-app name in the index identical to the one in my js file. Exactly identical, even the quotes. So:

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

and the js:

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

Weird how the ng-app has to be identical but the ng-controller doesn't.

小开

Me too faced the same issue. But the problem was I forgot to list the module in the list of modules the ng-app depends on.

小开

i faced this issue but i was able to correct this issue by renaming the controller, please have a try on it.

ctrlSub.execSummaryDocuments = function(){};

小开

I have faced this issue and it fixed with following way:

first remove ng-app from:
```
<html ng-app>
```
add name of ng-app to myApp:
```
<div ng-app="myApp">
```

add this line of code before function:

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

final look of script:

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


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

小开

sometimes something wrong in the syntax of the code inside the function throws this error. Check your function correctly. In my case it happened when I was trying to assign Json fields with values and was using colon : to make the assignment instead of equal sign = ...

小开

Another nice one: Accidentally redefining modules. I copy/pasted stuff a little too eagerly earlier today and ended up having a module definition somewhere, that I overrode with my controller definitions:

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

Then in my definitions, I was supposed to reference it like so:

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

What I did instead, was:

// 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() { /* ... */ });

Note the extra bracket in the call to angular.module.

小开

In my case, this message comes from forgotten dependency injection in main module

小开

I had two controllers with the same name defined in two different javascript files. Irritating that angular can't give a clearer error message indicating a namespace conflict.

小开

I am not sure about this tutorial but I had the same problem when I forgot to include the file into grunt/gulp minimization process.

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

Hope that helps.

小开

Watch your letter casing too. I spent a good hour chasing this bug.

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

while I name the controller

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

They all should be consistently named, in this case ForgotpwdController with lower case p.

小开

This can happen if you have gulp misconfigured to add your angular app code more than once. In my case, this was in index.js, and it was adding it as part of the directory of js files (globbed in gulp) before and after my controller declarations. Once I added an exclusion for index.js not to be minified and injected the second time, my app began to work. Another tip if any of the solutions above don't address your problem.

小开

Firstly - If the module name is not defined, in the JS you will not be able to access the module and link the controller to it.

You need to provide the module name to angular module. there is a difference in using defining module as well 1. angular.module("firstModule",[]) 2. angular.module("firstModule")

1 - one is to declare the new module "firstModule" with no dependency added in second arguments. 2 - This is to use the "firstModule" which is initialized somewhere else and you're using trying to get the initialized module and make modification to it.