web-dev-qa-db-fra.com

Directives de rendu dans $ sce.trustAsHtml

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>
angularjsangularjs-directiveangularjs-scope
23
rjm226

$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 .

26
Davin Tryon

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);
                }
            })
        }
    };
})
10
Алексей Медведев