Question

您好我在这里写了一个自定义指令。每当值发生变化时，该指令需要调用。这是我的指示。我怎样才能打电话给ng-change.here是我的指示。

Sample code
$window.open("www.google.com") -- works
$window.open("#/search") -- causes infinite cycle

JSP： -

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+'%';
          });
        }
      }
    });

这里如何在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();
          }
        });
      }
    };
  });

Answer 2

我的第一个想法是使用$ watch（）：

app.directive('percentageFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      scope.$watch(
        () => ngModelController.$modelValue,
        (newval) => {
          // Do your stuff here - the value has changed!
      }
    );
  }
);

Answer 3

直接在指令中调用change事件。试试这个

app.directive('percentageFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
        element.bind('change', function () {
             ngModelController.$setViewValue(element.val());
             ngModelController.$render();
        });
    }
  }
});

Answer 4

我怎样才能打电话给ng-change.here是我的指示。

引擎盖¹ ng-change directive使用ngModelController.$viewChangeListeners API。 percentageFormatter指令也可以这样做：

ngModelController.$viewChangeListeners.push(function myChange() {
     //Do things as if called by ng-change
});

仅当输入值的更改导致将新值提交给模型时，才会评估myChange函数。

不会被评估：

如果从$parsers转换管道返回的值未更改
如果输入继续无效，因为模型将保持null
如果以编程方式（从控制器与用户输入）更改模型

这提供了真实的＆＃34; ng-change＆＃34;指令的功能，无需添加额外的观察者或事件监听器。

如何创建自定义指令以侦听输入更改

4 个答案: