Renderizando diretivas dentro de $ sce.trustAsHtml

Eu incluí um Plunker aqui: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview

Eu estou tentando adicionar um botão para o DOM e quando clicado deve executar a function vinculada a ele. Neste caso, deve alertar “teste”. Aqui está o código.

controlador

app.controller('MainCtrl', function($scope, $sce) { $scope.trustedHtml = $sce.trustAsHtml(''); $scope.testAlert = function () { alert('testing') }; }); 

HTML

  

$sce.trustAsHtml e ng-bind-html não são feitos para construir HTML com diretivas. Essa técnica não funcionará.

Isso ocorre porque o angular funciona primeiro compilando e vinculando. Veja a visão geral conceitual para uma boa explicação.

Em resumo, quando você vincular o HTML definido em seu trustAsHtml , é muito tarde para o angular compilar (e, portanto, entender) a diretiva ng-click .

Para adicionar dinamicamente HTML, você deve estar olhando para o serviço $compile (e / ou diretivas). Docs estão aqui .

Desculpe pelo meu inglês ruim.

Para o Angular 1.6.1, encontrei uma solução que funcionou para mim.

modelo:

 

No controlador:

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

Directiva:

 .directive('initBind', function($compile) { return { restrict: 'A', link : function (scope, element, attr) { attr.$observe('ngBindHtml',function(){ if(attr.ngBindHtml){ $compile(element[0].children)(scope); } }) } }; })