angularjs - 在一个页面上多次使用相同的指令,始终采用最后一个模型值
问题描述
我正在尝试在每个标签旁边添加一个复制图标来复制文本,我的代码如下所示。我将每个标签的模型值作为输入传递给指令。
当我单击复制图标时,总是最后一个模型值显示为什么?
隔离范围是有效的。但是,我想知道内部发生了什么。
请详细说明。
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>
解决方案
<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 元素的数据属性是引用,所以上面所有的元素点击处理程序也需要引用.. 不是吗?
推荐阅读
- sql - teradata sql 助手在限制时给我一个错误?
- gnuplot - 使用 gnuplot 可视化体素化
- python - 如何使用 Python 操作 ERA5 土地每小时数据?
- python - 使用多处理应用多参数函数以生成熊猫列
- shell - 如何在 gdb 批处理模式下运行命令(打印 $_siginfo,x/i $pc)?
- javascript - TypeError:无法读取未定义的属性“hasOne”
- sql - Oracle SQL - 仅返回具有最高 enquiry_log_number 的查询 ID 的值
- snowflake-cloud-data-platform - 雪花不接受连接中的别名
- reactjs - Storybook 不呈现故事,错误:“useContext(...) 未定义”
- python-3.x - 二维数组处理