parameter - scope directive angularjs
Directivas de representación dentro de $ sce.trustAsHtml (2)
Perdón por mi mal ingles.
Para Angular 1.6.1 encontré una solución que funcionó para mí.
modelo:
<div ng-bind-html="trustAsHtml(content);" init-bind> </div>
En el 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);
}
})
}
};
})
He incluido un Plunker aquí: http://plnkr.co/edit/4vqV8toHo0vNjtfICtzI?p=preview
Intento agregar un botón al DOM y al hacer clic debería ejecutar la función vinculada a él. En este caso, debería alertar a "prueba". Aquí está el código.
controlador
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 y ng-bind-html no están destinados a construir HTML con directivas. Esta técnica no funcionará
Esto se debe a que angular funciona compilando primero y luego vinculando. Vea la descripción conceptual para una buena explicación.
En resumen, cuando se vincula el HTML definido en su trustAsHtml , es demasiado tarde para que angular compile (y por lo tanto entienda) la directiva ng-click .
Para agregar HTML de forma dinámica, debe consultar el servicio $compile (y / o las directivas). Los doctores están aquí .