Предоставление директив в $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>

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Для 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);
                }
            })
        }
    };
})