angularjs - 在一个页面上多次使用相同的指令，始终采用最后一个模型值

Question

我正在尝试在每个标签旁边添加一个复制图标来复制文本，我的代码如下所示。我将每个标签的模型值作为输入传递给指令。

当我单击复制图标时，总是最后一个模型值显示为什么？

隔离范围是有效的。但是，我想知道内部发生了什么。

请详细说明。

function copytext() {
    var directive = {
        restrict: 'EA',
        template: `
                 <i class="imd imd-content-copy  cursor-pointer"
                    ng-click="click()" ></i>
        `,
        link: function(scope, ele, attrs) {
            scope.click = function() {
                    alert(attrs.data)
            };
        }
    };
    return directive;
}

<label>Job No</label>: {{vm.jobInfo.jobNumber}}
<copytext data="{{vm.jobInfo.jobNumber}}"></copytext>

<label>Customer </label>: {{vm.jobInfo.customerCode}}
<copytext data="{{vm.jobInfo.customerCode}}"></copytext>

<label>Reference</label>: {{vm.jobInfo.reference}}
<copytext data="{{vm.jobInfo.reference}}"></copytext>

Answer 1

<label>Job No</label>: {{vm.jobInfo.jobNumber}}
<copytext data="{{vm.jobInfo.jobNumber}}" onclick="<attr.data=referencevalue>"></copytext>

<label>Customer </label>: {{vm.jobInfo.customerCode}}
<copytext data="{{vm.jobInfo.customerCode}}" onclick="<attr.data=referencevalue>"></copytext>

<label>Reference</label>: {{vm.jobInfo.reference}}
<copytext data="{{vm.jobInfo.reference}}" onclick="<attr.data=referencevalue>"></copytext>

@georgeawg，上面只是伪代码，不要考虑它的语法。最后一个 html 元素的数据属性是引用，所以上面所有的元素点击处理程序也需要引用.. 不是吗？