Question

如何创建要替换的自定义过滤器：

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

进入这个：

<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

编辑2：

有一个没有$watch的解决方案：http://jsfiddle.net/33jQz/18/

指令优先级设置为-1（ngBindHtml的优先级为0），逻辑使用$digest服务在下一个$timeout周期运行。

编辑1：

您可以使用指令替换div中的子a节点。它设置$watch检查div中新<a>元素的长度，然后剪切href属性并添加新属性 - ng-click="open()"。在the和它使用元素$compile服务使ng-click有效。

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，它应该与传递给ng-bind-html的外部html内容一起使用。

有一个jsfiddle：http://jsfiddle.net/33jQz/13/

旧答案：

~~您可以创建一个指令，用新的<a href>取代~~

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 change-url href="http://www.externalsite.com">Whatever text</a>

~~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);
        });
    }
}

}）;

Angular指令替换外部链接

2 个答案: