Question

我正在使用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>

这是链接编译的方式 Compiled link

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：我应该说，如果我右键单击它然后点击“在新标签页中打开”链接完全正常

Answer 1

答案实际上非常简单和令人尴尬。

我在容器周围缠绕了<a> </a>，其中渲染了ng-bind-html。将其更改为div。显然现在一切正常。

Answer 2

我如何使用它，是否使用了一个编译指令来获取所需的字符串内容，将其插入元素并进行编译。它具有1000的高优先级（指令的默认值为0），这意味着它在ng-bind-html指令之前工作（更高的数字 - ＆gt;优先），然后当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;
})();

Here it is in JS Fiddle

链接在ng-bind-html中不起作用

2 个答案: