Question

您好我正在编写一个指令，它根据通过属性指令传递的json对象执行一些自定义输入元素验证。我在编译阶段将ng-blur和ng-focus添加到我的指令控制器中的两个函数中。然而。当我最初运行我的代码时，输入字段不包含值，当我点击它并且模糊被触发时我可以在调试中看到ngModel确实包含该值。我认为视图第一次没有更新，但我不明白是什么导致它。这是我的代码。

    'use strict';

angular.module('zendantennesApp')
    .directive('validation', function ($compile, $parse) {
        return {
            scope: {
                validation: '@'
            },
            require: "?ngModel",
            restrict: 'A',
            compile: function(el, attrs) {
                el.removeAttr('validation');
                el.attr('ng-blur', 'evaluateExpression()');
                el.attr('ng-focus', 'assignOriginalValue()');
                var fn = $compile(el);
                return function(scope, element, attrs, ngModel){
                    ngModel.$render = function(){
                    $(element).val(ngModel.$viewValue);
                    };



                fn(scope);
            }
        },
        controller: function($scope){
            $scope.originalValue = $scope.ngModel;
            $scope.validationObject = JSON.parse($scope.validation.replace(/'/g, '"'));
            $scope.evaluateExpression = function(){
                console.log(validationObject);
            };
            $scope.assignOriginalValue = function(){
                $scope.originalValue = $scope.ngModel;

            }
        }
    }
});

我的HTML：

<input validation="{'min':0, 'max':5}" tabindex="45" type='text' class='form-control' ng-model="aanpassing.nieuweAntenne.elektrischeTilt"/>

我添加了一个plunkr来说明问题：

https://plnkr.co/edit/1qYxCiSZWHgVeN9CEpxw?p=info

如果有人能提供帮助，那将非常感激

Answer 1

我在评论中提供的plunkr似乎有效，所以我会把它作为答案。

不是在指令上使用compile，而是可以直接使用链接函数：

app.directive('validation', function ($compile, $parse) {
    return {
        scope: {
            validation: '@'
        },
        require: "ngModel",
        restrict: 'A',
        link:  function(scope, element, attrs, ngModel){
            scope.validation = scope.validation.replace(/'/g, '"');
            var validation = JSON.parse(scope.validation);
            for(prop in validation){
              if(validation.hasOwnProperty(prop)){
                setUpValidators(prop);
              }
            }
            function setUpValidators(val){
                switch(val){
                 case 'min': 
                   ngModel.$validators.min = function(modelValue, viewValue){
                      var value = modelValue || viewValue;
                      return value.length >= validation.min;
                   };
                   break;
                 case 'max':{
                   ngModel.$validators.min = function(modelValue, viewValue){
                     var value = modelValue || viewValue;
                     return value.length <= validation.max;
                    };
                    break;
                  }
                 }
            }
            ngModel.$render = function(){
                element.val(ngModel.$viewValue);
            };
        }
    };
});

这将根据提供的validate - 指令对象在ngModel上设置验证器。如果你想在输入模糊之后等待验证，你可以在输入元素上使用ngModelOptions这样的：ng-model-options="{updateOn: 'blur'}"。

执行此操作时，您无需在编译步骤中对元素添加任何ng-blur或ng-focus。

ngModel第一次不会触发视图更新

1 个答案: