Question

当我动态地将ng-blur事件添加到输入字段时，我收到错误

错误：[$ parse：syntax] http://errors.angularjs.org/1.2.9/ $解析/语法P0 = field.validate＆安培; P1 =是％20U ...荷兰国际集团％20％5B％3A％5D＆安培; P2 = 3及P3 =％7B％7Bfield.validate％7D％7D＆安培; P4 = field.validate％7D％7D

请帮忙。

仅供参考 - 当我硬编码ng-blur="Test1()"时，它可以正常工作。

http://jsfiddle.net/subhajayabalan/6tfnzy82/2/

或

HTML

<div ng-controller="MyCtrl">

    <form name="myForm">

        <p ng-repeat="field in formFields">
                <input
                    dynamic-name="field.name"
                    type="{{ field.type }}"
                    placeholder="{{ field.name }}"
                    ng-model="field.value"
                    ng-blur="{{ field.validate }}"
                    required
                >
        </p>

        <code class="ie">
            myForm.firstName.$valid = {{ myForm.firstName.$valid }}
        </code>    

        <code class="ie">
            myForm.email.$valid = {{ myForm.email.$valid }}
        </code>            

        <code class="ie">
            myForm.$valid = {{ myForm.$valid }}
        </code>

        <hr>               

    </form>

</div>

控制器

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

function MyCtrl($scope) {

    $scope.formFields = [
        {
            name: 'firstName',
            type: 'text',
            validate:'Test1()'
        },
        {
            name: 'email',
            type: 'email',
            validate:'Test2()'
        }
    ];

    $scope.Test1 = function()
    {
        console.log("Text1 On Blur Event works");
    }

     $scope.Test2 = function()
    {
        console.log("Text2 On Blur Event works");
    }   
}

myApp.directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    };
});

Answer 1

ng-blur 期待一个函数（IE doStuff（））而不是指针，这是你用表达式{{..}}得到的。这就是为什么它正确编译/解析并且不会触发模糊操作的原因。

您可以通过创建公共函数并通过检查索引来迭代/执行操作来执行解决方法：

 ng-blur="doStuff($index)"
  ...
 $scope.doStuff = function(idx){
    console.log("Text"+idx+" On Blur Event works");
 }

Complete jsfiddle

HTML

<div ng-controller="MyCtrl">

    <form name="myForm">

        <p ng-repeat="field in formFields">
                <input
                    dynamic-name="field.name"
                    type="{{ field.type }}"
                    placeholder="{{ field.name }}"
                    ng-model="field.value"
                    ng-blur="doStuff($index)"                
                    required
                >
        </p>

        <code class="ie">
            myForm.firstName.$valid = {{ myForm.firstName.$valid }}
        </code>    

        <code class="ie">
            myForm.email.$valid = {{ myForm.email.$valid }}
        </code>            

        <code class="ie">
            myForm.$valid = {{ myForm.$valid }}
        </code>

        <hr>               

    </form>

</div>

角

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

function MyCtrl($scope) {

    $scope.formFields = [{
        name: 'firstName',
        type: 'text'
    }, {
        name: 'email',
        type: 'email'
    }];

    $scope.doStuff = function(idx){
    console.log("Text"+idx+" On Blur Event works");
};
}

myApp.directive("dynamicName", function ($compile) {
    return {
        restrict: "A",
        terminal: true,
        priority: 1000,
        link: function (scope, element, attrs) {
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    };
});

动态字段的动态ng-blur

HTML

控制器

1 个答案: