Angular JS가 있는 링크에 조건부로 target="_blank" 추가

Angular JS가 있는 링크에 조건부로 target="_blank" 추가

저는 Angular JS에서 네비게이션 트리를 만들고 있습니다.트리의 대부분의 링크는 웹 사이트 내의 페이지를 가리키지만 일부 링크는 외부 사이트를 가리킬 수 있습니다.

링크의 href가 http:// 또는https://로 시작하는 경우 해당 링크는 외부 사이트용(regex와 같은)이라고 가정합니다./^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>

누가 나 좀 도와줄래?

감사해요.

제안대로 디렉티브를 작성하려고 했는데, 그 후 실제로 필요한 것은 이것뿐이라는 것을 깨달았습니다.

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

ng-attr-xyz를 동적으로 생성할 수 있습니다.@xyz값이 다음과 같은 경우undefined속성은 생성되지 않습니다. 단지 우리가 원하는 것입니다.

갱신하다

또는 지시문을 사용합니다.

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 routing과 함께 사용할 필요가 없는 경우 다음과 같이 사용할 수 있습니다.

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

제안된 솔루션은 하드 코딩된 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';
      }
    }
  }
}

보다 간단한 지시문은 모든 것을 처리함으로써 HTML을 변경할 필요가 없습니다.<a href="someUrl">태그, 추가target="_blank"어느 정도라면URL이 현재 호스트를 대상으로 하지 않습니다.

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

언급URL : https://stackoverflow.com/questions/23584201/conditionally-add-target-blank-to-links-with-angular-js