AngularJS中如何将元素ID传入指令？

我刚写了第一个AngularJS指令，虽然是基础内容，但卡在了获取元素ID的问题上。以下是我的代码：

指令代码 #

app.directive('rotateIcon', rotateIcon);
rotateIcon.$inject = ['$timeout'];
function rotateIcon() {
  return {
    link: function (event) {
      console.log(angular.element(event.target).attr('id'));
    }
  };
}

HTML代码片段 #

<i class="fas fa-sync-alt" id="wallet-refresh" ng-click="vm.setBalance();" rotate-icon></i>

请问如何在该指令内部将<i>元素的ID捕获为变量？

嘿，别着急，你的问题出在对AngularJS指令link函数的参数理解上～AngularJS指令的link函数默认参数顺序是**scope, element, attrs**，而不是你写的event。

我们可以通过两种简单的方式获取元素的ID：

方法1：使用element参数直接获取 #

element已经是指令绑定的DOM元素的AngularJS包装对象，直接调用attr('id')就能拿到ID：

app.directive('rotateIcon', rotateIcon);
rotateIcon.$inject = ['$timeout'];
function rotateIcon() {
  return {
    link: function (scope, element) {
      // 捕获ID到变量
      const elementId = element.attr('id');
      console.log('元素ID:', elementId); // 输出 wallet-refresh
    }
  };
}

方法2：使用attrs参数获取 #

attrs对象包含了元素上所有的属性，直接访问attrs.id更简洁：

app.directive('rotateIcon', rotateIcon);
rotateIcon.$inject = ['$timeout'];
function rotateIcon() {
  return {
    link: function (scope, element, attrs) {
      // 捕获ID到变量
      const elementId = attrs.id;
      console.log('元素ID:', elementId); // 输出 wallet-refresh
    }
  };
}

另外，注意你注入了$timeout但没在函数里用到，如果不需要的话可以去掉，避免冗余～

内容的提问来源于stack exchange，提问作者Joe Berthelot