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

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>

这就是链接的编译方式

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 指令之前工作（更高的数字 -> 优先），然后当 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