Angular: ng-bind-html отфильтровывает ng-click?

У меня есть некоторые html-данные, которые я загружаю из json файла.

Я показываю данные html, используя ngSanitize в своем приложении и используя ng-bind-html.

Теперь я хотел бы преобразовать любые ссылки в json blob из стандартного

<a href="some_link">link</a>

to:

<a ng-click="GotoLink('some_link','_system')">link</a>.

Итак, я делаю regExp в json файле для преобразования ссылок, но по какой-то причине ng-bind-html отфильтровывает ng-click в нем, и я не могу понять, почему. Предполагается ли это сделать, и если да, то возможно ли отключить это поведение?

Проверьте этот jsFiddle для демонстрации: http://jsfiddle.net/7k8xJ/1/

Любые идеи?

Ответ 1

Итак, проблема заключается в том, что он не компилирует html, который вы включаете (angular не анализирует его, чтобы найти директивы и многое другое). Не могу придумать способ сделать это для компиляции из контроллера, но вы можете создать директиву, которая включает в себя контент, и скомпилирует его.

Итак, вы изменили бы

<p ng-bind-html="name"></p>

<p compile="name"></p>

И затем для js:

var myApp = angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
.directive('compile', ['$compile', function ($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
   )};
  }]).controller('MyCtrl', function($scope) {
    var str = 'hello http://www.cnn.com';
    var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w][email protected])?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w][email protected])[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
    result = str.replace(urlRegEx, "<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>");
    $scope.GotoLink = function() { alert(); }
    $scope.name = result;
});

Angular 1.2.12: http://jsfiddle.net/7k8xJ/4/

Angular 1.4.3: http://jsfiddle.net/5g6z58yy/ (тот же код, что и раньше, но некоторые люди говорили, что он не работает на 1.4. *)

Ответ 2

Явное доверие HTML $sce Если вы хотите, чтобы Angular отображал данные модели как HTML без каких-либо вопросов, служба $sce - это то, что вам нужно. $sce - это служба Strict Contextual Escaping - причудливое имя для службы, которая может обертывать HTML-строку объектом, который сообщает остальной части Angular, что HTML-код доверен для рендеринга в любом месте.

В следующей версии контроллера код запрашивает службу $sce и использует службу для преобразования массива ссылок в массив доверенных объектов HTML с помощью $sce.trustAsHtml.

app.controller('XYZController', function ($scope, $sce) {

$sce.trustAsHtml("<table><tr><td><a onclick='DeleteTaskType();' href='#workplan'>Delete</a></td></tr></table>");

Ответ 3

Я все еще сталкивался с некоторыми проблемами с компиляцией, поскольку это не отвечало моим требованиям. Итак, есть это, очень хороший и легкий взлом, чтобы обойти эту проблему.

Мы заменяем ng-click на onClick, поскольку работает onClick. Затем мы пишем функцию javascript и вызываем это на событие onClick. В функции onClick мы обнаруживаем область действия тега привязки и вызываем эту функцию явно.

Ниже описано, как это делается:)

Ранее

<a id="myAnchor" ng-click="myControllerFunction()" href="something">

Теперь,

<a id="myAnchor" onClick="tempFunction()" href="something">

внизу или где-то,

<script>
function tempFunction() {
 var scope = angular.element(document.getElementById('myAnchor')).scope();
  scope.$apply(function() {
    scope.myControllerFunction();
 });
}
</script>

Теперь это должно работать. Надежда, которая помогает кому-то:)

Для получения дополнительной информации см. здесь.