Question

嗨，我有一个情况，

我创建了一个双输入指令。在下面的场景中你能帮忙吗？当我通过控制器将模型值更改为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;

Answer 1

该指令本身具有自动初始化功能。因此，每当我想重新初始化时，我都必须重新呈现指令。

如果要显式更新用户ctrl。$ setViewvalue =“”

Angular JS双输入指令UpDate查看值

1 个答案: