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＆amp;执行任何转换。 $ formatters view --> model。

更新以下是一个工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

备注：问题是你的指令不使用任何ngModelController方法将值发送到视图组件并将其读回模型。它是一个简单的包装＆＃34;指令，因此范围上的ngModel也可以以任何其他方式命名。

这是因为ngModel指令对你的＆＃34;偶数＆＃34;没有任何了解。元件。为此，您必须覆盖并使用$render()方法来显示该值，并在从UI读取新值时使用$setViewValue()。只有这样才会触发$ parsers和$ formatters，否则ngModel范围变量的行为与其他任何变量一样。

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

1 个答案: