각도 지침 내가 대체 할 사용자 정의 필터를 만드는 방법 외부 링크

Question

교체

<a href="#" ng-click="openExternal('http://www.externalsite.com')">Whatever text</a> 

쉽게해야한다,하지만 나는 그것을 할 수없는거야 ... 나는이 있습니다

<div ng-bind-html="item.htmltext | myFilter"></div> 

및 item.htmltext 내가이를 대체 할 myFilter을 만들어야합니다 ... 어떻게 내가 그런 식으로 교체 할 몇 가지 태그를 포함 링크?

Answer 1

EDIT 2$watch없는 해결책이

: 지침 우선 -1로 설정 http://jsfiddle.net/33jQz/18/

은 (ngBindHtml의 우선 순위는 0 beacuse) 로직에 의해 다음 $digest 사이클에서 실행될 $timeout 서비스를 사용하십시오.

편집 1 :

당신은 당신의 사업부에 아이 a 노드를 대체 지시어를 사용할 수 있습니다. 그것은 div35 안에 새로운 <a> 엘리먼트들을 체크하는 $watch을 설정하고 href 속성을 자르고 새로운 애트리뷰트 인 ng-click="open()"을 추가합니다. 에 그리고 을 만들기 위해 요소에 $compile 서비스를 사용합니다.

angular.module('ui.directives', []).directive('changeUrl', function ($compile) { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function (scope, elem, attrs) { 

      scope.$watch(function() { 
       return elem.children('a').length; 
      }, function() { 
       if (elem.children('a').length > 0) { 
        replace(); 
       } 
      }); 

      function replace() { 
       var href = elem.children('a').attr('href'); 
       elem.children('a').attr('href', null); 
       elem.children('a').attr('ng-click', 'open(\''+href+'\')'); 
       $compile(elem.contents())(scope); 

      } 
      scope.open = function (url) { 
       alert(url); 
      } 
     } 
    } 
}); 

$watch를 사용하는 것이 겨 바인드-HTML을 전달 외부 HTML 콘텐츠와 함께 작동해야하기 때문에.

이는 jsfiddle입니다 : http://jsfiddle.net/33jQz/13/

올드 답 :

<a change-url href="http://www.externalsite.com">Whatever text</a> 

: 당신은 사용하여 새

angular.module('ui.directives', []).directive('changeUrl', function() { 
    return { 
     restrict: 'A', 
     scope: true, 
     template: '<span><a ng-click="open()" ng-transclude></a></span>', 
     replace: true, 
     transclude: true, 
     link: function (scope, elem, attrs) { 
      var href = attrs.href; 
      scope.open = function(){ 
       alert(href);  
      } 
     } 
    } 
}); 

으로 <a href>을 대체 할 지침을 만들 수 있습니다

JSFiddle : http://jsfiddle.net/33jQz/8/

Answer 2

나는 모든 태그 요소를 대체 할 lodash를 사용하여 다른 솔루션을 발견했습니다

angular.module('module').directive('changeUrl', function ($compile, $timeout) { 
return { 
    priority: -1, 
    restrict: 'A', 
    scope: true, 
    link: function (scope, elem, attrs) { 
     $timeout(function() { 
     var links = elem.find('a'); 
      _.map(links, function (a) { 
       var href = a.href; 
       a.setAttribute('ng-click', 'openUrl(\'' + href + '\')'); 
       a.removeAttribute('href'); 
      }); 
      $compile(elem.contents())(scope); 
     }); 
    } 
} 

});