2017-03-23 40 views
0

嗨我這裏有一個情況,Angular JS雙輸入指令UpDate查看值

我已經創建了一個雙輸入指令。你能否在下面的情況下請幫忙。 當我通過控制器將模型值更改爲未定義時,視圖值不會被清除。這裏是代碼,

我的雙輸入指令如下,

angular.module("awcQuoteBuy.directives") 
    .directive('dualInput', function($timeout, inputValidationService) { 
    return { 
     restrict: 'E', 
     templateUrl: 'app/partials/common/doubleInput.html', 
     scope: { 
     modelValue: '=', 
     size: '@', 
     fieldError: '@', 
     blurFn: '&loseFocus' 
     }, 
     link: function postLink(scope, element, attrs, ctrl) { 

     scope.leftFocused = false; 
     scope.rightFocused = false; 

     scope.$watch('left', function(newVal, oldVal) { 
      if (newVal!==oldVal) { 
      var tmp = (newVal) ? inputValidationService.formatNumber(newVal+'') : ''; 
      scope.modelValue = tmp + '|'+ scope.getOtherValue(scope.right); 
      } 
     }); 

     scope.$watch('right', function(newVal, oldVal) { 
      if (newVal!==oldVal) { 
      var tmp = (newVal) ? inputValidationService.formatNumber(newVal+'') : ''; 
      scope.modelValue = scope.getOtherValue(scope.left) + '|' + tmp; 
      } 
     }); 

     scope.getOtherValue = function(value) { 
      return (value && value!=='') ? inputValidationService.formatNumber(value+'') : ''; 
     }; 

     //will set the value initially 
     $timeout(function() { 
      if (!scope.modelValue || scope.modelValue===null) { 
      scope.modelValue = ''; 
      } 
      if (scope.modelValue!=='') { 
      var splitIndex = scope.modelValue.indexOf('|'); 
      if (splitIndex>=0) { 
       var values = scope.modelValue.split('|'); 
       scope.left = values[0]; 
       scope.right = values[1]; 
      } else { 
       scope.left = scope.modelValue; 
      } 
      } 
     }); 

     /* 
     Below functions will add on-blur (lose focus) support to both fields. 
     */   
     scope.focusLeft = function() { 
      scope.leftFocused = true; 
     }; 

     scope.blurLeft = function() { 
      scope.leftFocused = false; 
      $timeout(function() { 
      if (!scope.rightFocused) { 
       scope.blurFn(); 
      } 
      }, 100); 
     }; 

     scope.focusRight = function() { 
      scope.rightFocused = true; 
     }; 

     scope.blurRight = function() { 
      scope.rightFocused = false; 
      $timeout(function() { 
      if (!scope.leftFocused) { 
       scope.blurFn(); 
      } 
      }, 100); 
     }; 

     } 
    }; 
    }); 

代碼的HTML部分是如下,

<dual-input model-value="dualInput[$index]" ng-switch-when="DUAL_NUMBER" size="{{q.length}}" 
       field-error="{{q.invalid || (nextClicked && !validateGeneralQuestion(acc.memberId, q))}}" id="{{'gQDual'+$index}}" 
       lose-focus="saveGeneralAnswer(acc.memberId, q)"></dual-input> 

在我的控制器時我將範圍值設置爲undefined或null,視圖中輸入的值不會被清除。請幫我在這裏,我應該做些什麼來清除該值

$scope.dualInput[$index]=undefined; 
+0

誰能幫我就當範圍值改變如何更新視圖值。或者重新渲染這些字段。 – Harry

回答

0

指令本身已經拿到了自動初始化功能。所以當我想重新初始化時,我不得不重新渲染指令。

如果你想明確地更新用戶按Ctrl。$ setViewvalue =「」