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

Question

我正在尝试实施一个 angular 指令，一旦 <input> 在 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 = '-';
                }
            });
        }
    };
});

但是，永远不会打印控制台日志。我还尝试了 'input onload'、'input init'、'input all' 和 'input'，结果都是一样的。我不知道 <input> 首次添加到 DOM 时会发出什么事件关键字？我怎样才能知道？

您可以查看代码http://plnkr.co/edit/TwraJlxZSd3TeSYscExq?p=preview

Answer 1

为此，请查看 $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

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

AngularJS directives to hide zero when <input> is initially loaded to the DOM

jquery

dom

dom-events

angularjs

angularjs-directive