Object not a function in AngularJS

Question

I have a controller that seems to be misbehaving. I have removed all the other code that works to make this short:

Controller:

'use strict';

angular.module('AppliedSiteApp').controller('CarouselCtrl', function ($scope) {

    $scope.nextImage = function() {
        console.log('hi');
    }

});

View:

<div class="carousel" ng-controller="CarouselCtrl">

    <ul class="nav">
        <li ng-click="prevImage()">&lt;</li>
        <li ng-click="nextImage()">&gt;</li>
    </ul>

</div>

Every time I click the button in the browser it says: 'TypeError: object is not a function' or 'no method replace'. What am I doing wrong?

Do you have the prevImage() defined? Are you clicking the prevImage() button? — chubbsondubs
– chubbsondubs, Commented Oct 11, 2013 at 16:30
Did you ever find an answer for this? I have the case with the same output but only after the first click, which works fine. — Rob Shepherd
– Rob Shepherd, Commented Apr 3, 2014 at 16:49
I used a function which is reserved.. $scope.register = fun... won't work. — Matej
– Matej, Commented Apr 4, 2014 at 22:30

Olu · Accepted Answer · 2014-05-04 19:27:00Z

11

Are you still having a problem with this?

I ran into the same issue. The problem for me was that the function name in the controller and view was the same name as a form I was using in the same view.

Changing either the form name or the function name fixed the error for me.

answered May 4, 2014 at 19:27

Olu

3,5962 gold badges22 silver badges11 bronze badges

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

1 Comment

JohnRobertPett Over a year ago

Thanks for the reply. If I remember correctly, it was to do with a naming issue. My own fault!

jbarnett · Accepted Answer · 2013-10-11 16:54:50Z

3

Something is wrong with the way you are wiring things I believe. I usually use this scaffold:

angular.module('AppliedSiteApp.controllers', []).
  controller('CarouselCtrl', ['$scope', function($scope) {
    $scope.nextImage = function() {
        console.log('hi');
    }
  }]);

The first argument to controller is the name, and the second is an array. In the array, you define what services you are injecting into your controller, then you define the callback function with the injected services as parameters.

edited Oct 11, 2013 at 16:54

answered Oct 11, 2013 at 16:36

jbarnett

9845 silver badges7 bronze badges

Comments

Martin · Accepted Answer · 2013-10-11 16:28:02Z

1

When creating a new module you need to specify a second parameter (its dependencies). If you have none, simply pass an empty array.

angular.module('AppliedSiteApp', [])...

Your example could access an existing module (that's when you don't specify the second argument), but then there's probably some code missing to spot the error (or I'm just blind).

answered Oct 11, 2013 at 16:28

Martin

8,8662 gold badges37 silver badges36 bronze badges

2 Comments

JohnRobertPett Over a year ago

That makes the controller get returned as undefined now. Thanks though.

Martin Over a year ago

Try to compare your code to this exampe: plnkr.co/edit/igQ93Kt0SFkfJMvBRekY?p=preview

Sangram Singh · Accepted Answer · 2013-10-11 16:30:25Z

0

try the following definition of controller

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

function CarouselCtrl($scope) {

    $scope.nextImage = function() {
        console.log('hi');
    }
}

answered Oct 11, 2013 at 16:30

Sangram Singh

7,19115 gold badges52 silver badges79 bronze badges

5 Comments

JohnRobertPett Over a year ago

Not too sure how you want me to implement that one. Can you give me a nudge in the right direction?

Sangram Singh Over a year ago

delete ur entire controller code. and type what's written above.

Sangram Singh Over a year ago

including 'use strict'

JohnRobertPett Over a year ago

Ok, tried that. Console says: 'Error: Argument 'MainCtrl' is not a function, got undefined'

Sangram Singh Over a year ago

hav u put 'ng-app = 'AppliedSiteApp' ? along with html?

reblace · Accepted Answer · 2013-10-11 16:38:35Z

0

I agree with the other responses that it's an issue with your wiring. Try this fiddle as an example: http://jsfiddle.net/reblace/7fVQR/

Declare your outer div like this:

<div ng-app="app" ng-controller="MainController">

And then your controller like this:

var app = angular.module('app', []);
function MainController($scope) { ... }

answered Oct 11, 2013 at 16:38

reblace

4,20519 silver badges18 bronze badges

2 Comments

JohnRobertPett Over a year ago

I have tried this and it doesn't work for me. I am using the Angular generator also, for Yeoman, and that isn't how it creates modules, which seems to break everything else too.

reblace Over a year ago

The way I do it in this example only really works if it's standalone (eg. in JSFiddle). Your approach to linking the view partial to the scope function callback is fine. But there's something wrong with the wiring between the partial and the controller. Your original question doesn't really contain enough info to isolate the problem. You may want to start over and verify you can get a "Hello World" working with the setup you have.

Collectives™ on Stack Overflow

Object not a function in AngularJS

5 Answers 5

1 Comment

Comments

2 Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related