Функция вызова внутри строки $sce.trustAsHtml() в Angular js

Я разрабатываю приложение с помощью Angularjs и добавляю HTML с помощью $sce.trustAsHtml() на моей странице. Я хочу вызвать функцию в динамически добавленном содержимом. Мой html и script, как показано ниже.

HTML

<div ng-app="ngBindHtmlExample">
  <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML"></p>
  </div>
</div>

Javascript

angular.module('ngBindHtmlExample', ['ngSanitize'])

.controller('ngBindHtmlCtrl', ['$scope','$sce', function ngBindHtmlCtrl($scope, $sce) {
  $scope.myHTML =$sce.trustAsHtml(
     'I am an <code>HTML</code>string with <a href="#" ng-mouseover="removeExp()">links!</a> and other <em>stuff</em>');

    $scope.removeExp = function (){
       console.log('dfdfgdfgdfg');
    }
}]);

jsfiddle

Нажмите здесь, чтобы увидеть

Ответы

Ответ 1

Это немного сложно, потому что ng-bind-html просто вставляет простой старый html и не документирует его компиляцию (поэтому любые директивы в html не будут обрабатываться с помощью angular.

Трюк заключается в поиске способа компиляции всякий раз, когда изменяется шаблон. Например, вы можете создать директиву, которая делает это. Это выглядело бы так:

.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() { return (parsed(scope) || '').toString(); }

            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});

Затем вы можете использовать его следующим образом:

<p ng-bind-html="myHTML" compile-template></p>

См. рабочий пример здесь:

http://jsfiddle.net/3J25M/2/