当<input />最初加载到DOM时,AngularJS指令隐藏零

时间:2015-08-05 04:40:01

标签: jquery angularjs dom javascript-events angularjs-directive

我正在尝试实现一个角度指令,一旦在DOM上就会隐藏字段的零。基本上这个

Hide Value in input when it's zero in angular Js

我的代码看起来像这样:     <input hide-zero-onload ng-model="test"></input>

.directive('hideZeroOnload', function() {
    return {
        link: function(scope, element) {
            element.on('input load', function() {
                console.log('loaded');
                if (this.value === '0') {
                    this.value = '-';
                }
            });
        }
    };
});

但是,永远不会打印控制台日志。我还尝试输入onload&#39;,&#39;输入init&#39;,&#39;输入所有&#39;和&#39;输入&#39;,具有相同的结果。我不知道首次添加到DOM时会发出什么事件关键字?或者我怎么知道? 您可以查看代码http://plnkr.co/edit/TwraJlxZSd3TeSYscExq?p=preview

1 个答案:

答案 0 :(得分:2)

为此目的,请查看$formatters。它们用于在更改或初始加载模型时格式化模型视图。 Plunkr http://plnkr.co/edit/SA9xz6eQmk3t7qfRack7?p=preview

你的指令看起来像这样:

.directive('hideZero', [ function() {
    return {
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {

        // Specify how UI should be updated
        ngModel.$formatters.push(function(value) {
          if (value === 0) {
            // If the value is zero, return a blank string.
            return '';
          }

          return value;
        });
      }
    };
  }]);

load事件可能无法触发所有元素。 Jquery on() load event on a single element