AngularJS error: fnPtr is not a function

Question

I'm trying to write a sample AngularJS, and SpringMVC project. The spring methods works fine, but I have a problem with declaraton of function in my site controller. My app should return a word from text input, but when I click the button, I've got this error:

[13:23:58.900] "Error: fnPtr is not a function
parser/_functionCall/<@http://localhost:8080/example/resources/js/Angular/angular.js:6542
ngEventDirectives[directiveName]</</</<@http://localhost:8080/example/resources/js/Angular/angular.js:13256
Scope.prototype.$eval@http://localhost:8080/example/resources/js/Angular/angular.js:8218
Scope.prototype.$apply@http://localhost:8080/example/resources/js/Angular/angular.js:8298
ngEventDirectives[directiveName]</</<@http://localhost:8080/example/resources/js/Angular/angular.js:13255
createEventHandler/eventHandler/<@http://localhost:8080/example/resources/js/Angular/angular.js:2095
forEach@http://localhost:8080/example/resources/js/Angular/angular.js:130
createEventHandler/eventHandler@http://localhost:8080/example/resources/js/Angular/angular.js:2094
"

This is my index.html:

<!DOCTYPE html>
<html lang="en" ng-app="Apken">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="resources/js/Angular/angular.js"></script>
<script src="resources/js/controler.js"></script>

</head>
<body ng-controller="theNamer">

<div class="input-append">
    <input style="width:358px;" class="span2" type="text" ng-model="myName" required min="1" />
    <button class="btn btn-primary" ng-disabled="!myName" ng-click="send()">Click!</button>
</div>
<ul>
<li  ng-repeat="name in names">{{name}}</li>

</ul>

</body>
</html>

And controler.js:

function theNamer ($scope,$http){
    $scope.myName='aa';

    $scope.fetchList=new function()
    {
        $http.get('ca/list.json').success(function(thList){
            $scope.names = thList;
        });
    }

        $scope.send=new function()
        {

            $http.post('ca/set/3').success(function(){

            $scope.fetchList;

            });

        }
        $scope.fetchList;


}

var Apken = angular.module('Apken',[]);
Apken.controller('theNamer', theNamer);

I've noticed, that must be a some kind of problem with function declaration in the ng-click value. On site startup controler.js works fine, but it crashes, when I click the button.

6footunder · Accepted Answer · 2014-01-19 04:31:28Z

41

Just wanted to add for anybody receiving this error, it can also be seen if you, like me, make the n00b mistake of creating a variable with the same name as function (the function being called from ng-click:

$scope.addTask = {};

$scope.addTask = function() {};

answered Jan 19, 2014 at 4:31

6footunder

1,36819 silver badges31 bronze badges

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

4 Comments

stofl Over a year ago

I got that error, because I wrote ng-repeat="f in foo()" instead of ng-repeat="f in foo".

webblover Over a year ago

@6footunder, fantastic, it's nice catch, I wasted 3 hours looking for this problem. Function Name and relative Variable name should not be same.

Abdellah Stands with Gaza Over a year ago

i got it because i named a function the same as the controller ControllerAs syntax

Tudor Ravoiu Over a year ago

It also occurred to me because i used the same name in form name and in form submit. So indeed, nice catch!

Pietro Saccardi · Accepted Answer · 2013-10-06 12:44:38Z

5

I have tested your code. Using AngularJS 1.0.7, the error disappears when you replace

$scope.send = new function() {

with

$scope.send = function () {

and same applies to fetchList.

I guess you mixed the two syntaxes function(*args*) { *body* } and new Function(*args*, *body*). Check on MDN: Function.

You have also to change your code in order to get your fetchList properly called:

function theNamer($scope, $http) {

        $scope.myName = 'aa';

        $scope.fetchList = function() {

            $http.get('ca/list.json').success(function(thList) {

                $scope.names = thList;

            });

        };

        $scope.send = function() {

            $http.post('ca/set/3').success(function() {

                $scope.fetchList();

            });

        };

        $scope.fetchList();

}

edited Oct 6, 2013 at 12:44

answered Oct 6, 2013 at 11:58

Pietro Saccardi

2,63237 silver badges43 bronze badges

4 Comments

e jay Over a year ago

The error has been disappeared, but there is another problem: the fetchList function doesn't want to work. When I've keep the "new" declaration: $scope.fetchList = new function() it works only, when I refresh the browser.

Pietro Saccardi Over a year ago

@ejay you must also add () when you call it, like this: $scope.fetchList();. I'll update the answer with the correct code.

e jay Over a year ago

My fault, I forgot aboout it. Thanks!

Pietro Saccardi Over a year ago

@ejay no problem. If everything works can you please mark the answer as correct? :)

Collectives™ on Stack Overflow

AngularJS error: fnPtr is not a function

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related