Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Object not a function in AngularJS

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?

like image 816
JohnRobertPett Avatar asked Oct 11 '13 16:10

JohnRobertPett


2 Answers

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.

like image 68
Olu Avatar answered Oct 21 '22 10:10

Olu


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.

like image 43
jbarnett Avatar answered Oct 21 '22 11:10

jbarnett