2014-12-28 10 views
2

Я использую ng-bind-html, но ссылки в привязке html не будут работать.Ссылки не работают в ng-bind-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); 
     }; 
}]) 

и до сих пор, когда я нажимаю на ссылку, ничего не происходит. Ничего в консоли.

Идеи?

Edit: входная строка:

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: Я должен сказать, ссылка работает совершенно нормально, если я правой кнопкой мыши и выберите пункт «открыть в новой вкладке»

+0

Можете ли вы показать строку, которую вы положили в 'article.content'? В частности, раздел ''. –

ответ

2

ответ на самом деле довольно легко и неловко.

У меня был <a> </a>, обернутый вокруг контейнера, где был обработан ng-bind-html. Изменил его на div. Очевидно, теперь все работает.

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; 
})(); 

Here it is in JS Fiddle

+0

Используя это, ссылка отображается как обычный текст, даже не обрабатывается как ссылка. – bergben

+0

@Benedikt Вы правы, обновляя мой ответ. –

+0

@Benedikt Посмотрите сейчас. –

 Смежные вопросы

  • Нет связанных вопросов^_^