有条件地将target ="_ blank"添加到与Angular JS的链接中

Question

我正在Angular JS中构建一个导航树.树中的大多数链接都指向我网站中的页面,但有些可能指向外部网站.

如果链接的href以http://或https://开头,那么我假设链接是针对外部站点的(正如/^https?:\/\//这样的正则表达式).

我想将target ="_ blank"属性应用于这些链接.当我创建链接时,我希望用角度来做这个:

<ul>
    <li ng-repeat="link in navigation">
        <a ng-href="{{link.href}}" [add target="_blank" if link.href matches /^https?:\/\//]>{{link.title}}</a>
    </li>
</ul>

谁能帮我吗？

谢谢

Answer 1

我正要按照建议创建一个指令然后意识到你真正需要做的就是:

<a ng-attr-target="{{(condition) ? '_blank' : undefined}}">
  ...
</a>

ng-attr-xyz让你动态创建@xyz,如果值undefined没有创建属性 - 正是我们想要的.

Answer 2

更新

或使用指令:

module.directive('myTarget', function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var href = element.href;
          if(true) {  // replace with your condition
            element.attr("target", "_blank");
          }
        }
    };
});

用法:

<a href="http://www.google.com" my-target>Link</a>

当您不需要使用Angular路由时,您只需使用:

<a href="http://www.google.com" target="{{condition ? '_blank' : '_self'}}">Link</a>

Answer 3

建议的解决方案仅适用于硬编码的href.如果它们被插值则它们将失败,因为当指令运行时,angular不会进行任何插值.以下解决方案将适用于插值的href,并基于Javarome的解决方案:

yourModule.directive('a', function() {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      attrs.$observe('href', function(){
        var a = elem[0];
        if (location.host.indexOf(a.hostname) !== 0)
          a.target = '_blank';
      }
    }
  }
}