javascript - $parsers-array 中的函数未在自定义指令中调用

Question

我想检查自定义指令中值的变化。
为此，我使用 $parsers unshift-function 添加我自己的函数

但是，我自己的函数没有被调用!

这是我的观点:

<div ng-controller="MyCtrl">
    <form novalidate name="myForm">
        Number: <even-number name="awesomeField" ng-model="val"></even-number>
    </form>
</div>

这是我的 javasript 代码:

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

function MyCtrl($scope) {
    $scope.val = "42";
    $scope.$watch('val', function() {
        console.log("Controller: "+$scope.val);
    });
}

myApp.directive('evenNumber', function(){
    var tmplt = ''+
    '<div class="input-group">'+
        '<input class="form-control" name="inputDate" type="text" data-ng-model="ngModel"/>'+
        '<span class="input-group-btn">'+
            '<button class="btn btn-default">Default</button>'+
        '</span>'+
    '</div>';
    return {
        restrict: 'E',
        require:'ngModel',
        replace: true,
        template: tmplt,
        scope: {
            ngModel: "="
        },
        link: function(scope, elem, attrs, ctrl){
            ctrl.$parsers.unshift(checkValue);

            function checkValue(viewValue){
                console.log("halllllo");
                return viewValue;
            }
        } // end link
    }; // end return
});

这里有什么问题？

这里是 jsFiddle

Answer 1

将您的指令写成属性指令，用于 <input /> ngModel 已经知道如何处理的元素。像这样包装输入不适用于 ngModel。您将需要两个指令来实现您的需要。一个捆绑输入和按钮(事件编号)，第二个附加到输入本身以使用 $parsers model --> view 执行任何转换。 & $格式化程序view --> model .

更新这是一个工作示例:

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

function MyCtrl($scope) {
    $scope.val = "42";
    $scope.$watch('val', function() {
        console.log("Controller: "+$scope.val);
    });
}

myApp
.directive('evenNumberConverter', function(){
    return {
        restrict: 'A',
        require:'ngModel',
        link: function(scope, elem, attrs, ctrl){
            ctrl.$parsers.unshift(checkValue);
       
            function checkValue(viewValue){
                console.log("halllllo");
                return viewValue;
            }
        } // end link
    }; // end return
})
.directive('evenNumber', function(){
    var tmplt = ''+
    '<div class="input-group">'+
        '<input class="form-control" name="inputDate" type="text" even-number-converter data-ng-model="value"/>'+
        '<span class="input-group-btn">'+
            '<button class="btn btn-default" data-ng-click="setDefault()">Default</button>'+
        '</span>'+
    '</div>';
    return {
        restrict: 'E',
        replace: true,
        template: tmplt,
        scope: {
            value: "="
        },
        link: function(scope, elem, attrs, ctrl){
            scope.setDefault = function() {
              scope.value = 0;
            };
        } // end link
    }; // end return
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <form novalidate name="myForm">
        Number ({{val}}): <even-number name="awesomeField" value="val"></even-number>
    </form>
</div>

注意事项:问题是您的指令不使用任何 ngModelController将值发送到 View 组件并将其读回模型的方法。它是一个简单的“包装器”指令，因此作用域上的 ngModel 也可以以任何其他方式命名。

这是因为 ngModel 指令对您的“偶数”元素一无所知。为此，您必须覆盖并使用 $render()方法来呈现值，当从 UI 读取新值时使用 $setViewValue() .只有这样 $parsers 和 $formatters 才会被触发，否则 ngModel 范围变量的行为与任何其他变量一样。