Условно добавьте target = "_ blank" к ссылкам с Angular JS

Я создаю дерево навигации в 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>

Может ли кто-нибудь помочь мне?

Спасибо

Ответы

Ответ 1

Обновление

Или используйте директиву:

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>

Ответ 2

Я как раз собирался создать директиву, как было предложено, а затем понял, что все, что вам действительно нужно сделать, это следующее:

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

ng-attr-xyz позволяет динамически создавать @xyz, а если значение undefined не создается атрибут - то, что мы хотим.

Ответ 3

Предлагаемые решения будут работать только с жестко закодированными hrefs. Они будут терпеть неудачу, если они будут интерполированы, потому что angular не выполнит интерполяцию при запуске директивы. Следующее решение будет работать на интерполированных hrefs и основано на решении 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

Более простая директива не требует изменений в вашем HTML, обрабатывая все теги <a href="someUrl"> и добавляя target="_blank", если someURL не нацеливает текущий хост:

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