Javascript Girl
  1. Javascript Girl
  3. Fonction d'appel à l'intérieur de $ sce.trustAsHtml () chaîne dans Angular js
Intereting Posts
Loops JavaScript: pour … en vs pour Comment supprimer le support carré de JSON Obtenir du contenu dans le script en tant que texte Obtenir Jsoup pour prendre en charge le HTML html généré par JavaScript Convertir SVG en PNG avec des images appliquées en arrière-plan vers des éléments svg D3js – Obtenir un graphique linéaire dessiné, à partir de l'entrée "Données JSON" en utilisant d3.json JQuery Move div avec les touches fléchées Comment puis-je afficher les endroits, dans google maps api v3 et google places api, entre deux points? Les actions dans l'iframe cassent mon script jQuery Arrêtez la diffusion de la webcam de getUserMedia sans page rafraîchissante Pourquoi mon groupe de capture regex ne capture-t-il que la dernière partie de la chaîne lorsqu'il correspond à plusieurs pièces? La classe de caractères Intellij IDEA regex ne peut être utilisée dans la plage de caractères Infowindow closing et var (google maps api v3) Node MySQL échapper à l'instruction LIKE Pourquoi mes nœuds svg perdent-ils la mémoire dans IE

Fonction d'appel à l'intérieur de $ sce.trustAsHtml () chaîne dans Angular js

Je développe une application en utilisant Angularjs et j'ajoute un HTML utilisant $sce.trustAsHtml() dans ma page. Je souhaite appeler une fonction dans un contenu ajouté de manière dynamique. Mon html et mon script comme ci-dessous.

HTML 

 <div ng-app="ngBindHtmlExample"> <div ng-controller="ngBindHtmlCtrl"> <p ng-bind-html="myHTML"></p> </div> </div>

Javascript 

 angular.module('ngBindHtmlExample', ['ngSanitize']) .controller('ngBindHtmlCtrl', ['$scope','$sce', function ngBindHtmlCtrl($scope, $sce) { $scope.myHTML =$sce.trustAsHtml( 'I am an <code>HTML</code>string with <a href="#" ng-mouseover="removeExp()">links!</a> and other <em>stuff</em>'); $scope.removeExp = function (){ console.log('dfdfgdfgdfg'); } }]);

Jsfiddle

Cliquez ici pour voir

C'est un peu difficile car ng-bind-html insère simplement un ancien html et ne dérange pas de le compiler (de sorte que toutes les directives du html ne seront pas traitées par angular.

L'astuce consiste à trouver un moyen de compiler chaque fois que le modèle change. Par exemple, vous pouvez créer une directive qui fait cela. Il ressemblerait à: 

 .directive('compileTemplate', function($compile, $parse){ return { link: function(scope, element, attr){ var parsed = $parse(attr.ngBindHtml); function getStringValue() { return (parsed(scope) || '').toString(); } //Recompile if the template changes scope.$watch(getStringValue, function() { $compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves }); } } });

Vous pouvez ensuite l'utiliser comme ceci: 

 <p ng-bind-html="myHTML" compile-template></p>

Voir l'exemple de travail ici:

http://jsfiddle.net/3J25M/2/