在指令Angularjs中传递元素ID答案

【问题标题】：Pass element id in a directive Angularjs在指令Angularjs中传递元素ID
【发布时间】：2017-09-27 22:11:58
【问题描述】：

这是我将相同文本复制到剪贴板的指令

mainApp.directive('ngCopyable', function() {
    return {
        restrict: 'A',
        link:link
    };
    function link(scope, element, attrs) {
        element.bind('click',function(){
            var text = document.getElementById('id-my-div');
            var range = document.createRange();
            range.selectNode(text);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            var successful = document.execCommand('copy');

            var msg = successful ? 'successful' : 'unsuccessful';
            //console.log('Copying text command was ' + msg);
            window.getSelection().removeAllRanges();
        });
    }

});

它正在工作。我在一个图标中使用这个指令

<span ng-copyable>
  <i class="zmdi zmdi-copy"></i>
</span>

当我单击图标时，id 为 id-my-div 的 div 内的文本被成功复制。问题是 id 不是动态的。这样，只会复制该元素。是否可以更改传递我要复制的元素的 id 的指令？

【问题讨论】：

请在项目上放置一个数据属性，并带有您要复制的项目的 ID。比读取该数据属性
你能解释清楚吗？

标签： javascript html angularjs angularjs-directive

【解决方案1】：

您可以在指令中传递任何属性

<span ng-copyable>
  <i class="zmdi zmdi-copy" elementId="myId"></i>
</span>

在你的指令中你可以通过

var id = element.attrs('elementId')

【讨论】：