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

Posted 2023-02-19

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

【英文标题】：Can I make an Angular directive to match a CSS selector (not just tag name)?

【发布时间】：2014-02-04 10:50:17

【问题描述】：

我可以定义一个影响文档中所有 <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:"
    
  ;
);

【问题讨论】：

我意识到如果答案是“否”，有一个明确的解决方法：简单地检查 link 函数中的元素，如果它与我正在寻找的任何选择器不匹配则退出为了。问题仍然存在！

我担心答案是否定的，您将不得不使用该解决方法。您可能想在 Angular 的 github 上发布一些内容作为功能请求。

我也怀疑这不是。但是，如果可能的话，我会做的工作会有所不同。我不会在“a”上使用元素指令，而是在自定义“my-href”属性上使用属性指令。或者，如果您由于某种原因无法更改模板，则可能是属性指令 href。

【参考方案1】：

没有。

当您在特定名称下注册指令时，角度将指令放入新名称下的指令缓存中或将其推送到指定名称下的现有指令列表中。

之后，角度搜索 dom 以查找您的指令和 (tagName|attrName|className|commentName) 之间的对应关系，当找到时，角度调用列表中每个指令的编译函数并将找到的 (element, 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
    
  ;
);