javascript - 如何创建自定义指令来监听输入更改

Question

嗨，我在这里编写了一个自定义指令。每次值更改时都需要调用该指令。这是我的指令。我如何调用 ng-change.here 是我的指令。

app.directive('percentageFormatter', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
          ngModelController.$parsers.push(function(data) {
            //convert data from view format to model format
            return data.replace('%','');
          });

          ngModelController.$formatters.push(function(data) {
            //convert data from model format to view format
            return data+'%';
          });
        }
      }
    });

JSP:-

<input type="text"  percentage-formatter ng-model="tea">

这里如何在 ng-change 中调用该指令。

Answer 1

$scope.watch 函数监视值的变化。将其添加到您的指令中

 $scope.$watch(function () {
  // do soething 
});

或者您也可以使用以下一种方法。

   element.bind('keypress', function(event) {
      if(event.keyCode === 32) {
        event.preventDefault();
      }
    });

这就是我创建百分比格式化程序的方式

angular.module('test')
  .directive('percentageFormatter', function() {
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModelCtrl) {
        if(!ngModelCtrl) {
          return;
        }

        ngModelCtrl.$parsers.push(function(val) {
          if (angular.isUndefined(val)) {
            val = '';
          }
          var clean = val.replace("%", '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        });

        element.bind('keypress', function(event) {
          if(event.keyCode === 32) {
            event.preventDefault();
          }
        });
      }
    };
  });