J'ai inclus un Plunker ici: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview
J'essaie d'ajouter un bouton au DOM et lorsque vous cliquez dessus, vous devez exécuter la fonction qui lui est liée. Dans ce cas, il doit alerter "testing". Voici le code.
manette
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>
$sce.trustAsHtml
et ng-bind-html
ne sont pas destinés à construire du HTML avec des directives. Cette technique ne fonctionnera pas.
En effet, angular fonctionne d'abord en compilant puis en liant. Voir aperçu conceptuel pour une bonne explication.
En bref, au moment où vous liez le code HTML défini dans votre trustAsHtml
, il est trop tard pour angular pour compiler (et donc comprendre) le ng-click
directive.
Afin d'ajouter dynamiquement du HTML, vous devriez regarder le $compile
service (et/ou directives). Les documents sont ici .
Pour Angular 1.6.1, j'ai trouvé une solution qui fonctionnait pour moi.
modèle:
<div ng-bind-html="trustAsHtml(content);" init-bind> </div>
Dans le contrôleur:
$scope.trustAsHtml = function(string) {
return $sce.trustAsHtml(string);
};
Directif:
.directive('initBind', function($compile) {
return {
restrict: 'A',
link : function (scope, element, attr) {
attr.$observe('ngBindHtml',function(){
if(attr.ngBindHtml){
$compile(element[0].children)(scope);
}
})
}
};
})