Директивы рендеринга в $sce.trustAsHtml

Я включил Plunker здесь: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

Я пытаюсь добавить кнопку в DOM и при нажатии должен выполнить привязанную к ней функцию. В этом случае следует предупредить "тестирование". Вот код

контроллер

app.controller('MainCtrl', function($scope, $sce) {
        $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>');  

        $scope.testAlert = function () {
            alert('testing')
        };
});

HTML

<body ng-controller="MainCtrl">
    <div ng-bind-html="trustedHtml"></div>
</body>
Источник

2 ответа

Решение

$sce.trustAsHtml а также ng-bind-html не предназначены для создания HTML с директивами. Эта техника не будет работать.

Это потому, что angular работает сначала компиляцией, а затем линковкой. Смотрите концептуальный обзор для хорошего объяснения.

Короче говоря, к тому времени, когда вы связываете HTML, определенный в trustAsHtml, слишком поздно для углового, чтобы скомпилировать (и, следовательно, понять) ng-click директивы.

Чтобы динамически добавлять HTML, вы должны смотреть на $compile сервис (и / или директивы). Документы здесь.

Источник

Извините за мой плохой английский.

Для Angular 1.6.1 я нашел решение, которое сработало для меня.

шаблон:

<div ng-bind-html="trustAsHtml(content);" init-bind> </div>

В контроллере:

    $scope.trustAsHtml = function(string) {
        return $sce.trustAsHtml(string);
    };

Директива:

.directive('initBind', function($compile) {
return {
        restrict: 'A',
        link : function (scope, element, attr) {
            attr.$observe('ngBindHtml',function(){
                if(attr.ngBindHtml){
                     $compile(element[0].children)(scope);
                }
            })
        }
    };
})
Источник
Другие вопросы по тегам