Question

我有一个Angular指令。在link函数内部，我这样做：

link: function(scope, element, attrs) {
    ...
    element.data('startY', value);
    ...
}

我想要做的是使用指令的名称来伪装'startY'，而不对名称进行硬编码。我想动态地获取名称。

有没有办法做到这一点？ Angular是否提供了反映它的方法？类似的东西：

link: function(scope, element, attrs) {
    ...
    element.data(this.$name + '-startY', value);
    ...
}

如果没有，建议选择data()密钥以避免冲突的最佳做法是什么？

Answer 1

如AngularJS source code所示，指令的名称是在指令选项所在的对象文字的上下文中指定的。然而，链接函数无法访问对象文本的上下文this，因为它将被转移到编译函数，在编译函数中将在编译过程发生后返回并调用它。

要获取链接功能中的名称，您可以遵循以下任何建议：

[1]创建一个可能引用对象文字的变量（指令选项）。

.directive('myDirective', function() {
  var dir = {
    link: function(scope, elem, attr) {
      console.log(dir.name);
    }
  };
  return dir;
});

[2]您也可以使用编译函数获取指令的名称，因为它是在指令选项的上下文中调用的。

.directive('myDirective', function() {
  return {
    compile: function(tElem, tAttr) {
      var dirName = this.name;
      return function(scope, elem, attr) { /* link function */ }
    }
  };
});

Answer 2

据我所知，你已经回答了自己的问题。您可以在完成后通过字符串连接为名称添加前缀，但将其添加为单独的数据存储可能会更容易。

element.data('directiveName', this.$name).data('startY', value);

我不确定你是什么意思避免碰撞，因为这只适用于传递给链接功能的元素。

在AngularJS中获取指令名称

2 个答案: