如何将 hasOwnProperty 与 AngularJS 指令`attrs` 对象一起使用答案

【问题标题】：How to use hasOwnProperty with AngularJS Directive `attrs` object如何将 hasOwnProperty 与 AngularJS 指令`attrs` 对象一起使用
【发布时间】：2018-12-29 03:34:27
【问题描述】：

我有一个名为ip-abc 的指令，用于检查字段的输入值并转换为美元格式的值。我有一个条件，如果我们的值为“0”，那么我会将其转换为 $0。

ipabc.js

var filterFunc = function (value) {
    if(value == '0'){
    if(attrs.hasOwnProperty('ipZeroDollar')){
       var currencyValue = $filter('currency')(value);
       currencyValue = currencyValue.toString();
       return currencyValue.replace('.00','');
    } 
}

我面临的问题是，如何在 HTML 中设置ipZeroDollar = true。截至目前，(attrs.hasOwnProperty('ipZeroDollar')) 将以false 的形式出现。

<div ng-class = {'//something'}
  <input type="tel" name="amount" class="form-control" ng 
   model="Data.Amount" maxlength="15" required ip-abc/>
</div>

【问题讨论】：

attrs 来自哪里？在任何情况下，它都不太可能将其作为属性。更有可能是一个条目。（例如，attrs 更可能是名称/值对的列表。当然是 in the DOM，但我不知道 Angular 的事情......）
如果 attrs 是一个包含<input> HTML 标记属性的对象，则将名称更改为“data-ipzerodollar”并将输入更改为<input data-ipZeroDollar="someValue" />。但也许像data-currency="ipzerodollar" 这样的东西可能会更好，这样你就可以支持多种货币但只有一个属性。再说一次，我什至不确定这在使用 angular 时作为数据属性是否有意义。我也不明白使用电话输入来描述货币价值。

标签： javascript html angularjs angularjs-directive

【解决方案1】：

这就是你使用 hasOwnProperty() 的方式。

let obj = {color: 'yellow'}
obj.hasOwnProperty('color') // returns true

您似乎想在Data 上调用hasOwnProperty()，因为这看起来像是一个对象，而这就是您获得金额的地方。

【讨论】：

【解决方案2】：

我面临的问题是，如何在 HTML 中设置ipZeroDollar = true。截至目前，(attrs.hasOwnProperty('ipZeroDollar')) 是假的。

camelCase 需要在 HTML 中规范化为 kebab-case：

<input type="tel" name="amount" class="form-control"
       ng-model="Data.Amount" maxlength="15" required
       ip-abc  ip-zero-dollar />

有关详细信息，请参阅

演示

angular.module("app",[])
.directive("ipAbc", function() {
    return {link: postLink};
    function postLink(scope,elem,attrs) {
      var hasIpZeroDollar = attrs.hasOwnProperty("ipZeroDollar");
      console.log("hasIpZeroDollar",hasIpZeroDollar);
    }
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app"
    <input type="tel" name="amount" class="form-control"
           ng-model="Data.Amount" maxlength="15" required
           ip-abc ip-zero-dollar />
</body>

【讨论】：

如果可行，请接受答案，以便其他人知道问题已解决。