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

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 に答える