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

Posted 2023-05-09

【中文标题】AngularJS 指令在 <input> 最初加载到 DOM 时隐藏零

【英文标题】：AngularJS directives to hide zero when <input> is initially loaded to the DOM

【发布时间】：2015-10-27 16:50:10

【问题描述】：

我正在尝试实现一个角度指令，该指令将在<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

【问题讨论】：

留下test 未分配。您可以在您的 plunkr 中尝试，文本框将为空。

@Strelok 这不适用于我的应用程序。如果它不为零，我仍然希望能够在初始加载时显示测试数据

【参考方案1】：

为此请查看$formatters。它们旨在在模型更改或初始加载时格式化模型视图。 Plunkrhttp://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