有条件地将 target="_blank" 添加到与 Angular JS 的链接答案

【问题标题】：Conditionally add target="_blank" to links with Angular JS有条件地将 target="_blank" 添加到与 Angular JS 的链接
【发布时间】：2014-06-28 08:23:53
【问题描述】：

我正在 Angular JS 中构建导航树。树中的大多数链接将指向我网站内的页面，但有些可能指向外部网站。

如果链接的 href 以 http:// 或 https:// 开头，那么我假设该链接是针对外部网站的（/^https?:\/\// 之类的正则表达式可以解决问题）。

我想将 target="_blank" 属性应用于这些链接。我希望在创建链接时使用 Angular 来做到这一点：

<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>

谁能帮帮我？

谢谢

【问题讨论】：

实际上不要这样做。从 UI 的角度来看，这很糟糕。让用户决定何时打开新窗口或标签。
我知道你的意思，但是如果用户在网站上并且想要点击指向外部资源的链接，那么在新标签/窗口中打开链接而不是重定向他们的链接是有意义的当前选项卡。我会谨慎使用它，并且仅当我认为在没有其标签保持打开状态的情况下被引导离开网站会对某些用户造成刺激/困惑时。
没有。如果用户在网站上并想要单击链接，那么在同一个选项卡中打开是有意义的。如果他们想在新选项卡中打开它，他们将按住 ctrl 单击，或右键单击并说“在新选项卡中打开”。不要打破网络惯例。
@GoodPerson - 从用户体验的角度来看，这肯定是有好处的。我们的 AngularJS 项目是一个 SPA。点击/单击链接的用户希望在不中断他们在应用程序中的工作的情况下打开链接。默认情况下在新选项卡中打开是满足此需求的适当方式。
@GoodPerson 在当前选项卡中打开外部链接是一种糟糕的体验，因为普通用户不知道使用后退按钮进行导航。在 UAT 会话中花费 1 小时，然后再次告诉我“网络约定”必须始终遵守。

标签： javascript angularjs

【解决方案1】：

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

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

ng-attr-xyz 允许您动态创建@xyz，如果值为undefined，则不会创建任何属性——这正是我们想要的。

【讨论】：

这对我来说是一个非常简单的解决方案。它有条件地写入我在这种情况下需要的属性。很简单，我了解到我几乎可以使用任何属性来做到这一点。谢谢！
不错，这正是我所追求的。没想到为这么简单的事情添加另一个指令！
查看 Angular Documentation 了解其工作原理。
这个question解释了ng-attr-的使用。
error NG8002: Can't bind to 'ng-attr-target' since it isn't a known property of 'a'.

【解决方案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>

【讨论】：

我的印象是 target="_self" 阻止 routeProvider 捕获链接更改。见here
@BenGuest 正确，在这种情况下你需要一个简单的指令
好的，谢谢。该指令正是我想要的。我猜想任何关于 html 元素的自定义行为都需要创建一个指令。

【解决方案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';
      }
    }
  }
}

【讨论】：

【解决方案4】：

一个更简单的指令不需要通过处理所有<a href="someUrl">标签来更改您的HTML，如果someURL不针对当前主机，则添加target="_blank"：

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

【讨论】：