Render AngularJS directive sur $ $ chargé contenu

J'ai un petit problème. J'ai une directive

app.directive('a', function() { return { restrict: 'E', link: function(scope, elem, attrs) { elem.on('click', function(e){ e.preventDefault(); alert('Hyperlinks not allowed!'); }); } }; });

Et une demande $http pour JSON contenant le contenu de la page

 { "currentNodeName":"Page 1", "childrenNodes":[ {"id":"3","name":"Page 1-1"}, {"id":"4","name":"Page 1-2"}], "parentNode":null, "currentNodeContent":[ {"content":"<p>This is Page1. <a href=\"http://badlink.org/i/dont/want/to/work\">Link</a></p>"}], "currentNodeId":"1" }

Le currentNodeContent est chargé dans un div

 <div id="loadedContent" ng-bind-html="boardCtrl.nodeData.currentNodeContent[0].content"></div>

Et maintenant la question: comment puis-je réaliser que la balise <a> du contenu chargé fonctionne comme directive?

Merci.

On peut trouver un mètre d'erreur presque correct à l' angulaire ng-bind-html et à la directive, même si une meilleure forme serait:

 app.directive("unsecureBind", function($compile) { return { link: function(scope, element, attrs) { scope.$watch(attrs.unsecureBind, function(newval) { element.html(newval); $compile(element.contents())(scope); }); } }; });

Le ng-bind-html attribue simplement les données au html sans exécuter de compilation (voir https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L197 ). Ce n'est toujours pas tout à fait raison sur le changement de la valeur que les directives contenues ne sont pas notifiées qu'elles sont détruites. Une meilleure version serait donc.

 app.directive("unsecureBind", function($compile) { return { link: function(scope, element, attrs) { var childscope; scope.$watch(attrs.unsecureBind, function(newval, oldval) { if (!newval && !oldval) return; // handle first run if (childscope) childscope.$destroy(); element.html(newval || ""); if (!newval) return; childscope = scope.$new(); $compile(element.contents())(childscope); }); } }; });

Ceci est correct du point de vue angulaire, MAIS:

Vous violez complètement l'idée de mvc
En restreignant les éléments avec des directives, vous êtes des éléments de liste noire basiques, ce qui n'est généralement pas une bonne idée, vous devriez utiliser une liste blanche.
Il est également très peu sûr de permettre à l'utilisateur d'entrer dans votre contexte angulaire.

Ce serait une meilleure idée de filtrer l'entrée html via une fonction de liste blanche, puis de la lier avec ng-bind-html.

Angular utilise 'a' comme directive comme priorité '0' ( https://docs.angularjs.org/api/ng/directive/a )

Essayez de faire ceci:

Définissez votre priorité plus haut que ce qui a été défini, l'exemple 1 ou Number.MAX_VALUE.
Définissez le terminal sur true, donc il ne traitera pas les priorités inférieures.

Pourrait fonctionner, je suppose … 🙂