如何获取 HTML 元素的变量属性？

Question

我有一个 ng-repeat，我在其中设置了一个属性，如下所示：

<div ng-repeat="item in itemsList"
     stepType="{{item.stepType}}">
     {{item.itemValue}}
</div>

item.stepType 可以有值 'task' 或 'action' 我正在尝试像这样获取属性“stepType”：

let stepType = el.getAttributeNode("stepType");
console.log(stepType.value);

我得到的结果是：

{{item.stepType}}

但预期的结果是task 或action

我也尝试使用函数getAttribute()获取属性，但结果是一样的。

我还注意到，在上面的代码中，如果我记录 stepType 的值而不是 stepType.value，我得到的对象看起来像这样 stepType: 'task'

我怎样才能得到期望值？

Answer 1

如果属性名是normalized:

<div ng-repeat="item in itemsList"
     step-type="{{item.stepType}}">
     {{item.itemValue}}
</div>

自定义AngularJS指令可以$observe属性：

app.directive("stepType", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        attrs.$observe("stepType", function(value) {
            console.log(value);
        });
    }
})

控制台将记录对属性内插值的更改。

Answer 2

尝试删除双引号。替换这个

<div ng-repeat="item in itemsList"
     stepType="{{item.stepType}}">
     {{item.itemValue}}
</div>

与

<div ng-repeat="item in itemsList"
     stepType={{item.stepType}}>
     {{item.itemValue}}
</div>