Връзките не работят в ng-bind-html

Използвам 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: Трябва да кажа, че връзката работи напълно добре, ако щракна с десния бутон върху нея и след това щракна върху „отвори в нов раздел“


angularjs ng-bind ng-bind-html
person bergben    schedule 28.12.2014    source източник
comment
Можете ли да покажете низа, който поставихте в article.content? По-конкретно раздела <a>.   -  person Omri Aharon    schedule 28.12.2014
comment
Моля, вижте редакцията,   -  person bergben    schedule 28.12.2014

Отговори (2)


arrow_upward
2
arrow_downward

Отговорът всъщност е доста лесен и смущаващ.

Имах <a> </a>, увит около контейнера, където ng-bind-html беше изобразен. Промених го на div. Очевидно всичко работи сега.

person bergben    schedule 28.12.2014

arrow_upward
0
arrow_downward

Как го използвам, използвам директива за компилиране, която взема желаното съдържание на низ, вмъква го в елементите и го компилира. Той има висок приоритет от 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

person Omri Aharon    schedule 28.12.2014
comment
Използвайки това, връзката се показва като обикновен текст, дори не се обработва като връзка. - person bergben; 28.12.2014
comment
@Benedikt Погледнете сега. - person Omri Aharon; 28.12.2014
comment
Благодаря за вашата помощ. Опитах това, но това все още не работи... Мисля, че връзката е компилирана правилно, има просто нещо от angular, което презаписва функционалността за кликване на браузъра и води до нищо не се случва... - person bergben; 28.12.2014
comment
Здравей @OmriAharon. Благодаря, че публикувахте това. Реши точно това, което търсех. Как успяхте да намерите тези функции за Angular? Не съм сигурен, че бих могъл да разреша това сам, така че се чудя какво ви е довело до това решение. - person a_byte_of_pizza; 29.01.2020