2

我正在使用 ng-bind-html，但绑定 html 中的链接不起作用。

这是绑定内容的代码：

<div class="list-group-item-text" ng-class="article.img.length >0 ? 'col-md-10' : 'col-md-12'"
                 ng-bind-html="article.content | to_trusted">
</div>

这就是链接的编译方式 编译链接

to_trusted 过滤器如下所示：

.filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
}])

而且，当我点击链接时，什么也没有发生。控制台中也没有任何内容。

想法？

编辑：输入字符串：

It was never really finished and is actually in a state which is a result of playing around with jQuery and other tools. <a href="http://www.google.com" target="_blank">Google</a>

Edit2：我应该说，如果我右键单击该链接然后单击“在新选项卡中打开”，则该链接可以正常工作

4

2 回答 2

2

答案其实很简单也很尴尬。

我在<a> </a>渲染 ng-bind-html 的容器周围有一个包裹。将其更改为 div。显然现在一切正常。

于 2014-12-28T14:38:14.470 回答
0

我如何使用它，是我使用编译指令获取所需的字符串内容，将其插入元素并编译它。它具有 1000 的高优先级（指令的默认值为 0），这意味着它在ng-bind-html指令之前工作（更高的数字 -> 优先），然后当ng-bind-html指令运行时，它知道链接是链接：

    <div 
         compile-html="text" 
         ng-bind-html="text | to_trusted"></div>
    </div>

编译指令：

var CompileHtmlDirective = (function () {
    function CompileHtmlDirective($compile) {
        this.$compile = $compile;
        this.priority = 1000;
        this.link = function (scope, element, attr) {
            scope.$watch(attr.compileHtml, function (newVal, oldVal) {
                if (newVal) {
                    element.html(newVal);
                    $compile(element.contents())(scope);
                }
            });
        };
    }

    return CompileHtmlDirective;
})();

这是在 JS Fiddle

于 2014-12-28T09:25:11.893 回答