【问题标题】:AngularJS error: fnPtr is not a functionAngularJS 错误:fnPtr 不是函数
【发布时间】:2013-10-13 01:30:50
【问题描述】:

我正在尝试编写一个示例 AngularJS 和 SpringMVC 项目。 spring 方法工作正常,但我的站点控制器中的函数声明存在问题。我的应用程序应该从文本输入中返回一个单词,但是当我单击按钮时,出现此错误:

[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
"

这是我的 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>

还有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);

我注意到,这一定是 ng-click 值中的函数声明存在某种问题。现场启动 controler.js 工作正常,但是当我单击按钮时它崩溃了。

【问题讨论】:

    标签: javascript html spring angularjs


    【解决方案1】:

    我已经测试了您的代码。使用AngularJS 1.0.7,替换后错误消失

    $scope.send = new function() {
    

    $scope.send = function () {
    

    同样适用于fetchList

    我猜你混合了function(*args*) { *body* }new Function(*args*, *body*) 这两种语法。查看 MDN:Function

    您还必须更改代码才能正确调用您的 fetchList

    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();
    
    }
    

    【讨论】:

    • 错误已经消失,但是还有一个问题:fetchList函数不想工作。当我保留“新”声明时:$scope.fetchList = new function() 它仅在我刷新浏览器时才有效。
    • @ejay 调用时还必须添加(),例如:$scope.fetchList();。我会用正确的代码更新答案。
    • 我的错,我忘了。谢谢!
    • @ejay 没问题。如果一切正常,您可以将答案标记为正确吗? :)
    【解决方案2】:

    只是想为收到此错误的任何人添加,如果您像我一样犯了创建与函数同名的变量的n00b错误(从ng-click调用的函数:

    p>
    $scope.addTask = {};
    
    $scope.addTask = function() {};
    

    【讨论】:

    • 我收到了那个错误,因为我写的是ng-repeat="f in foo()"而不是ng-repeat="f in foo"
    • @6footunder,太棒了,这很好,我浪费了 3 个小时来寻找这个问题。 函数名和相对变量名不能相同.
    • 不错的收获@6footunder,你救了我兄弟!
    • 我明白了,因为我将一个函数命名为与控制器相同的函数 ControllerAs 语法
    • 我也想到了,因为我在表单名称和表单提交中使用了相同的名称。确实,不错的收获!
    猜你喜欢
    • 2015-10-28
    • 2015-10-14
    • 2015-08-07
    • 1970-01-01
    • 1970-01-01
    • 2016-04-18
    • 2015-11-07
    • 1970-01-01
    • 2019-12-27
    相关资源
    最近更新 更多