Argument ... is not a function, got undefined

Question

I'm playing with AngularJS, but I'm getting an error message: Argument 'Controller' is not a function, got undefined Here's the JSFiddle, and HTML code:

<h2>Hata's Tree-Like Set</h2>
<div ng-app ng-init="N=3;" ng-controller="Controller">
<input type="range" min="1" max="10" step="1" ng-model="N">  
<div class="tree"></div>
</div

Then I define the Controller function in JavaScript, which is not registering for some reason.

function Controller($scope){
$scope.$watch("N", function(){  ... });}

You can find out your problem, by this checklist: stackoverflow.com/a/26797874/930170 — S Panfilov
– S Panfilov, Commented Nov 14, 2014 at 5:11

hkf · Accepted Answer · 2013-08-07 23:48:48Z

12

I had exactly the same error: argument 'HelloCtrl' is not a function, got undefined.

Turns out I had a syntax error in my hello.js file... a missing comma in an array definition, inside HelloCtrl().

I added the comma, and then everything started working!

Hope this helps.

edited Aug 7, 2013 at 23:48

hkf

4,5201 gold badge32 silver badges46 bronze badges

answered Aug 7, 2013 at 23:26

Deb Vorndran

1291 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthew James Davis Over a year ago

it doesn't, we don't know where the comma is supposed to go. please give an example

Mawg Over a year ago

What he is saying is "it could be anywhere, and nothing, not even the browser console, is going to tell you where". You just have to go over your coed with fine toothed comb. It helps if you can remember whet you changed last, or have a backup version which you can compare with. I get this error fairly often and for me it has always been caused by mis-matched brackets. YMMV.

Mawg Over a year ago

For what it's worth, I just tracked down my latest such error to array problem. I had to comment out a huge block of code written last midnight & uncomment it bit by bit. I had myData.push(val: i); instead of $scope.myData.push({val: i});`` - mssing $scope` and missing braces. Naturally, this means that my controller is not a function ;-) There is just on easy way to to solve this error.

user3214545 · Accepted Answer · 2014-01-28 11:50:29Z

7

I had the same error... argument 'RadioController' is not a function...

I had referenced the Controller wrong in the HTML. I had

data-ng-controller="RadioController"

when it should have been

 data-ng-controller="Radio.RadioController"

('Radio' is the module the Controller was in)

answered Jan 28, 2014 at 11:50

user3214545

2,2233 gold badges24 silver badges28 bronze badges

Comments

Bastien Caudan · Accepted Answer · 2013-04-01 09:05:29Z

5

In the option of your fiddle, you choose to execute your javasctipt onLoad. With the onLoadoption your javascript is added on the window.onLoadfunction :

    window.onload=function(){
       function Controller($scope){
          ...
       }
    }

So angular can not access to your code because it is in a closure.

With the no wrapoption, your code is directly added in the page and is accessible to angular : JSFiddle.

You can browse the source to see how it works.

edited Apr 1, 2013 at 9:05

answered Mar 31, 2013 at 22:13

Bastien Caudan

4,4901 gold badge19 silver badges29 bronze badges

3 Comments

john mangual Over a year ago

the slider is supposed to control the complexity of the twig, basically the value N in a for loop

David Rivers Over a year ago

Please explain the no wrap option you mention. This answer is missing some context that makes it less useful than it could be.

Stuart Burrows Over a year ago

just to clarify - the no wrap option is within jsfiddle, not angular (you can see it in the control bar on the left). Removing this removes the closure which is what causes the OPs issue. For more on closures: stackoverflow.com/questions/111102/…

glebm · Accepted Answer · 2013-10-19 12:11:25Z

4

You can define a controller and register it in one step:

angular.module('myModule').controller('MyCtrl', function($scope) {
  $scope.$watch ....
});

If you want the code to work correctly after it's been minified, you have to explicitly specify the dependency on $scope:

angular.module('myModule').controller('MyCtrl', ['$scope', function(s) { 
  // you can now name the $scope argument whatever you want
  ...
}]);

edited Oct 19, 2013 at 12:11

answered Mar 31, 2013 at 21:35

glebm

21.2k8 gold badges55 silver badges68 bronze badges

1 Comment

rainabba Over a year ago

Didn't make any difference for me.

jjnguy · Accepted Answer · 2014-08-04 01:26:09Z

4

I was having a hard time with this as well. The cause of my problem was that I had an old version of Angular that didn't support the new as aliasing.

Make sure you have the latest version of Angular that supports as.

answered Aug 4, 2014 at 1:26

jjnguy

139k54 gold badges298 silver badges328 bronze badges

Comments

Dávid Horváth · Accepted Answer · 2014-09-05 13:06:41Z

Have you configured your $controllerProvider correctly?

From the documentation:

Name of a constructor function registered with the current $controllerProvider or an expression that on the current scope evaluates to a constructor function.

The controller instance can be published into a scope property by specifying ng-controller="as propertyName".

If the current $controllerProvider is configured to use globals (via $controllerProvider.allowGlobals()), this may also be the name of a globally accessible constructor function (not recommended).

Gautam G · Accepted Answer · 2014-11-23 13:16:50Z

1

Well, I succeeded in solving this error by downgrading to legacy angular JS (1.2.27).

The same syntax (you have used above) for defining controller and angular JS (1.3.2) is the combination which caused this error.

With angular (1.3.2), following syntax worked for me.

var app = angular.module('dummyApp', []);

app.controller('helloController', function($scope){
    <write statements here>
});

answered Nov 23, 2014 at 13:16

Gautam G

4942 gold badges7 silver badges15 bronze badges

Comments

Mahendra Singh · Accepted Answer · 2014-11-24 11:06:15Z

1

There is no need to downgrade to older versions. You can use both the as method or the angular.module method.

Also the order of loading your files has to be correct.

(Consider require js if you have a hard time remembering the order of loading your files)

answered Nov 24, 2014 at 11:06

Mahendra Singh

3082 silver badges9 bronze badges

Comments

Dan Power · Accepted Answer · 2014-07-26 15:31:24Z

0

I had to re-order the script tags. I put the controller higher than another it depends on.

Took me a few hours, hope this helps someone else

answered Jul 26, 2014 at 15:31

Dan Power

1,1411 gold badge12 silver badges18 bronze badges

Comments

cheesey_toastie · Accepted Answer · 2014-09-05 12:58:42Z

0

I had this error - I'd got the case wrong in the name of my Controller.

It was registered as CallbacksController... took me five minutes of swearing to spot the case difference (hint - capital B in my case!).

answered Sep 5, 2014 at 12:58

cheesey_toastie

3913 silver badges7 bronze badges

Collectives™ on Stack Overflow

Argument ... is not a function, got undefined

10 Answers 10

3 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related