angularjs - 在 AngularJS 中对 DOM 进行后处理

Question

我想将 target="_blank" 添加到通过链接过滤器的 HTML 片段中。也就是说，我需要在内容完全渲染后对 DOM 进行后处理。

看到这个 jsFiddle。

http://jsfiddle.net/ADukg/410/

我怀疑这与指令的优先级有关，但到目前为止改变它并没有帮助。

Answer 1

你可以用这样的 setTimeout 来做到这一点。即使时间为0，它也只会在角度完成处理后运行。

Answer 2

问题是链接过滤器将在评估指令后添加“a”标签，而 element.find('a') 将找不到任何东西。

我认为最好的解决方案是编写自己的 url 过滤器，然后调用链接过滤器并且不使用指令。

更新

我也为此创建了一个 jsfiddle：http: //jsfiddle.net/jomikr/ADukg/420/

Answer 3

1. 打开文件angular-sanitize.js
2. 转到第 525 行
3. 将其更改为writer.start('a', {href:url, target:'_blank'});

警告 - 现在，linky 将为每个链接添加目标 _blank！

Answer 4

Renan 的答案效果很好，但不适用于页面加载后添加的链接。

如果您需要将 _target 空白添加到新链接，请尝试使用带有监视事件的过滤器：

JS

app.directive('targetBlank', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.targetBlank, function(){
                element.find('a').attr('target', '_blank');
            });
        }
    };
});

HTML

<div ng-bind-html="textModel | linky" target-blank="textModel"></div>

Answer 5

以及仅使用控制器中的功能怎么样。

我在控制器中使用它：

$scope.getTarget = function(isExternal) {
    return isExternal ? '_blank' : '';
}

在html中：

<div ng-repeat="slide in slides" data-slider-id="{{$index}}">
    <a ng-hide="{{slide.link == ''}}" 
       href="{{slide.link}}" 
       target="{{getTarget(slide.isExternal)}}">
...