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