Angular JS dual input Directive UpDate View Value

Question

Hi I have a situation here,

I have created a dual input directive. Can you please help to in the below scenario. When I change the model value via controller to undefined, the view values are not cleared. Here is the Codes,

My Dual Input Directive is as follows,

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);
        };

      }
    };
  });

The HTML Piece of code is as follows,

<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>

In My Controller when I set the scope value to undefined or null, the entered values in the view is not cleared. Please help me here what I should do to clear this value

$scope.dualInput[$index]=undefined;

Can anyone help me on how to update the view value when the scope value is changed. Or re render the fields. — Harry
– Harry, Commented Mar 23, 2017 at 11:16

Harry · Accepted Answer · 2017-03-24 12:19:56Z

0

The directive itself has got the auto initialize feature. So I had to re render the directive whenever I wanted to reinitialize.

If you want to explicitly update user ctrl.$setViewvalue = ""

answered Mar 24, 2017 at 12:19

Harry

174 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS dual input Directive UpDate View Value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related