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

【问题标题】：Same Directives multiple times on a page taking last model value always在一个页面上多次使用相同的指令，始终采用最后一个模型值
【发布时间】：2019-04-21 17:16:49
【问题描述】：

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

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

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

请详细说明。

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>

【问题讨论】：

阅读AngularJS Developer Guide - Isolating the Scope of a Directive。
@georgeawg 没看懂，我这里不是在处理任何模型，我是在处理一个属性...
因为scope 不是隔离的，所以指令的所有实例共享同一个点击处理程序scope.click。该指令的所有实例都将一个函数分配给scope.click。每个额外的实例都会覆盖相同的点击处理程序。以最后的分配为准。

标签： angularjs angularjs-directive angularjs-scope isolate-scope

【解决方案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 元素的数据属性是引用，所以上面所有的元素点击处理程序也需要引用..不是吗？

【讨论】：