Uncaught TypeError: fn is not a function error in AngularJS web page

Question

I am a newbie on AngularJS. I have the following angularJS code

(function () {
    getDataFactory = function ()
    {
        return {
            callWebApi: function (reqData)
            {
                alert(reqData);
            }
        }
    }
    patientCategoryController = function ($http, $scope, getDataFactory) {
        // The following line is the culprit. If this is commented, I dont get the error. 
        // But it works, ie. when UNcommented, I get the messagebox showing     
        // "someDataToPass"!! So whats wrong???
        angular.element(document).ready(getDataFactory.callWebApi('someDataToPass'));
    }
    patientCategoryController.$inject = ['$http', '$scope', 'getDataFactory'];
    angular.module('demoApp', []);
    angular.module('demoApp').controller('patientCategoryController', patientCategoryController);
    angular.module('demoApp').factory('getDataFactory', getDataFactory);    
}());

I found the method call

angular.element(document).ready(getDataFactory.callWebApi('someDataToPass'));

is the problem. So I am missing some thing very basic. Can someone please guide me on this. The HTML is absolute basic skeleton. I get this error in Chrome browser, right click and then select inspect page element.

Shomz · Accepted Answer · 2015-10-30 12:14:26Z

3

You're supposed to pass the function body as a ready parameter, not the function return value, so this:

angular.element(document).ready(getDataFactory.callWebApi('someDataToPass'));

should become:

angular.element(document).ready(function(){
   getDataFactory.callWebApi('someDataToPass');
})

See it here: https://api.jquery.com/ready/

answered Oct 30, 2015 at 12:14

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

Comments

Constantine Poltyrev · Accepted Answer · 2015-10-30 12:14:17Z

3

You are passing a void function result do the document.ready method. Here're two possible fixes:

Using document.ready

angular.element(document).ready(function(){
  getDataFactory.callWebApi('someDataToPass'));
});

Not using document.ready

getDataFactory.callWebApi('someDataToPass'));

answered Oct 30, 2015 at 12:14

Constantine Poltyrev

1,02410 silver badges12 bronze badges

3 Comments

VivekDev Over a year ago

Thank You, your first suggestion as well as the second one also worked.

Constantine Poltyrev Over a year ago

I believe your controller will be called when the DOM structure is initialized, so you don't really need to handle document.ready event.

VivekDev Over a year ago

Yes, now I understand. Deeply appreciate your effort. Thanks. It was helpful.

Collectives™ on Stack Overflow

Uncaught TypeError: fn is not a function error in AngularJS web page

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related