簡體   English   中英

Angular JS雙輸入指令UpDate視圖值

[英]Angular JS dual input Directive UpDate View Value

嗨,我這里有情況,

我創建了一個雙重輸入指令。 在以下情況下,請您提供幫助即可。 當我通過控制器將模型值更改為undefined時,不會清除視圖值。 這是代碼,

我的雙重輸入指令如下:

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;

該指令本身具有自動初始化功能。 因此,無論何時我想重新初始化,我都必須重新渲染指令。

如果要顯式更新用戶ctrl。$ setViewvalue =“”

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM