ngModel不會觸發視圖更新第一次

您好我正在編寫一個指令，基於通過屬性指令傳遞的json對象執行一些自定義輸入元素驗證。我在編譯階段添加ng-blur和ng-focus綁定到我的指令控制器中的兩個函數。然而，。當我最初運行我的代碼時，輸入字段不包含一個值，當我點擊它並且模糊被觸發時，我可以在調試中看到ngModel確實包含該值。我認爲這個視圖並不是第一次更新，但我不明白是什麼導致了它。這是我的代碼。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

，如果有人能夠幫助這將是極大的讚賞

來源

2016-02-10 Arno_Geismar

您應該改爲使用ngModelController。通過使用'require：'ngModel''而不是在範圍上。那麼ngModelController將成爲鏈接函數的第四個參數，並且您現在在控制器中執行的操作應該在那裏完成。也許嘗試閱讀ngModelController的文檔，以獲取關於如何去做的建議 – Gustav

@Gustav我更新了我的指令，但仍然遇到同樣的問題。我懷疑他們可能是我的問題的另一個原因，但我無法找到它 –

@Gustav $ render函數觸發與正確的值，至少在我的測試用例是「50.00」，但該視圖顯示一個空輸入 –

的plunkr我似乎在評論中提供工作，所以我會把它作爲一個答案。除了使用匯編指令的

，可以直接使用邏輯函數：

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 -directive上設置驗證的ngModel。如果你想等待驗證，直到輸入模糊後，你可以在輸入元素上使用ngModelOptions這樣的：ng-model-options="{updateOn: 'blur'}"。

這樣做時，您不需要在編譯步驟中添加ng-blur或ng-focus元素。

來源

2016-02-10 12:31:32 Gustav

ngModel不會觸發視圖更新第一次

回答

相關問題