0

Fiz um exemplo mais simples para o meu problema:

Dentro do meu controller está assim:

$rootScope.myAction = function(){
    alert('Olá mundo!');
}

$scope.setAction = function() {

 var comp = $compile('<button ng-click="myAction()">Teste</button>')($scope);
 return $sce.trustAsHtml(comp);
};

$rootScope.result = $scope.setAction();

E no HTML assim:

<div ng-bind-html="result"></div>

Porque não funciona o método?

Obs: Quando não coloco o trustAsHtml, ele está me retorna como objeto.

1 Resposta 1

1

O problema

Acredito que no seu caso a abordagem está errada. Ao que parece você está tentando definir o conteúdo de um botão criado dinamicamente dentro de uma div.

O problema de fazer isso com ng-bind-html é que você precisaria de ter o html em formato de string. No caso de $compile, quando você constroi o elemento com ele, ele vai retornar um objeto, equivalente à chamada de angular.element().

É por isso que no seu caso não está funcionando.

A Solução

Eu acredito que a melhor abordagem é usar o angular.element para adicionar o elemento, que você "compilou" para Angular, na sua div.

Eu fiz assim:

angular.module('app', [])
.controller("AppController", function($scope, $compile, $sce) {
  
  $scope.myAction = function () {
    
    alert('Olá');
  };
  
  $scope.setAction = function() {
    
    var comp = $compile('<button ng-click="myAction()">Teste</button>')($scope);
    
    angular.element(document.querySelector('#content')).append(comp);
  };
  
  $scope.setAction();
  
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app">
  
  <div ng-controller="AppController">
    <div id="content"></div>
  </div>  
</div>

Veja que o exemplo funciona exatamente como o esperado. o myAction é chamado corretamente e o elemento é criado dentro da div, com a pequena modificação em relação ao id.

Sobre o ng-bind-html

O problema de tentar injetar esse botão com ng-bind-html é que o ng-bind-html só aceita expressões HTML em formato de string. Não vai funcionar com o objeto retornado por angular.element.

Com o seu código, você teria um meio de obter o html retornado por $compile, da seguinte forma:

 var comp = $compile('<button ng-click="myAction()">Teste</button>')($scope);

return $sce.trustAsHtml(comp[0].outerHTML);

A propriedade outerHtml retorna o conteúdo do próprio elemento como uma string HTML. O problema é que você perderia a referência ao myAction e a função não seria executada, já que a ideia do $compile é preparar o html que vai ser inserido dinamicamente para entrar no ciclo de processamento do AngularJS.

Dica

Ainda acrescento a informação de que, no seu caso, talvez fosse mais vantagem trabalhar com diretivas para criação de funcionalidades mais dinâmicas.

As diretivas ajudam bastante na reutilização de código, evitando repetições inúteis também.

Link da documentação de diretivas: https://docs.angularjs.org/guide/directive

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .