Question

我可以定义一个影响文档中所有<a>元素的指令，如下所示：

myApp.directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      // Some custom logic to apply to all <a> elements
    }
  };
});

我可以这样做，但对于匹配给定CSS选择器的元素？喜欢这个？

myApp.directive('a[href^="mailto:"]', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      // Some custom logic to apply to all <a> elements
      // w/ a href attribute starting in "mailto:"
    }
  };
});

Answer 1

没有。

当您使用特定名称将angular puts指令注册到新名称下的指令缓存中时，或者将其推送到指定名称下已有指令的列表。

之后，角度搜索通过查找指令与（tagName | attrName | className | commentName）之间的对应关系，并在找到角度调用时编译列表中每个指令的函数，并将找到的（元素，attrs）作为参数传递进入编译功能。

因此，在您的情况下，a[href^="mailto:"]将按'<a[href^="mailto:"]></a[href^="mailto:"]>'进行搜索，这显然是不存在的，对于属性，类和注释也是如此。

在您的情况下，最理智的解决方案是：

myApp.directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        if (attrs.href.indexOf('mailto:') !== 0) { return; }
        // Some custom logic to apply to all a[href^="mailto:"] elements
    }
  };
});

我可以制作一个Angular指令来匹配CSS选择器（而不仅仅是标签名称）吗？

1 个答案: