Javascript Girl
  1. Javascript Girl
  3. La compilation angulaire en directive semble passer à la boucle infinie
Intereting Posts
Est-il sécuritaire d'utiliser asynchrone / attendez-vous maintenant? Propriétés privées dans les modèles ou les vues de Backbone.js Combiner des classes dynamiques et statiques via css binding, knockout.js JQuery .load () dans l'élément variable ou caché Dynamic SpeedMeter javascript ou jquery plugin Comment puis-je comparer deux chaînes de temps au format HH: MM: SS? JS et type.match en tant que type de fichier mime – besoin de conseils Convertir du texte à l'image en utilisant javascript Backbone.js – obtenir des données supplémentaires avec la demande Comment obtenir la taille du fichier depuis le site Web en utilisant javascript dans IE? Texte dans le cercle div. Taille du format ajustée au contenu Attribut CF-Hash et script ajoutés mystérieusement aux liens mailto Remplacer l'espace par desh de JavaScript D3 gradient d'arc Supprimez tous les auditeurs d'événements JavaScript d'un élément et de ses enfants?

La compilation angulaire en directive semble passer à la boucle infinie

J'ai une directive avec du texte dynamique. Je veux pouvoir avoir des directives ng-click pour appeler des fonctions à partir du texte. Je comprends que la meilleure façon de le faire est de compiler le html dans un modèle. Mais lorsque j'essaie de le faire, je me lève dans une boucle infinie: 

angular.module('app') .directive('times', ['$compile', function ($compile) { return { restrict: 'E', link: function postLink(scope, element, attrs) { scope.selectDay = function() { console.log("Clicked on directive"); } var content = element.html("<div><span ng-click='selectDay()'>Some test content</span></div>"); var compiled = $compile(content); element.append(content); compiled(scope); } }; }]);

Vous devez modifier la façon dont vous compilez. Donnez d'abord à l'élément le contenu, puis compilez son contenu avec la portée: 

 element.html("<div><span ng-click='selectDay()'>Some test content</span></div>"); $compile(element.contents())(scope);

Violon

Votre problème est que vous compilerz un élément incorrect après l'avoir ajouté à DOM, vous devez d'abord compiler le nouvel élément avec la portée, puis ajouter à l'élément de directive

CODE 

 angular.module('app', []) .directive('times', ['$compile', function($compile) { return { restrict: 'E', link: function postLink(scope, element, attrs) { scope.selectDay = function() { console.log("Clicked on directive"); } var content = "<div><span ng-click='selectDay()'>Some test content</span></div>"; var compiled = $compile(content); element.append(compiled(scope)); } }; }]);

Plunkr

De façon simple, comme ceci: 

 angular.module('app').directive('times', [ '$compile', function($compile) { return { restrict: 'E', template: '<div><span ng-click="selectDay()">test</span></div>', link: function(scope, element, attrs) { return scope.selectDay = function() { return console.log('Clicked on directive'); }; } }; } ]);

Vous devez réorganiser votre création et votre compilation de contenu. Créez le contenu, puis créez la fonction de compilation, puis compilez puis ajoutez le contenu compilé. DEMO: http://jsfiddle.net/d2ayw9vz/ 

 angular.module("app",[]) .directive('times', ['$compile', function ($compile) { return { restrict: 'E', link: function postLink(scope, element, attrs) { scope.selectDay = function() { console.log("Clicked on directive"); }; var content = "<div><span ng-click='selectDay()'>Some test content</span></div>"; var compiled = $compile(content); var linked =compiled(scope); element.append(linked); } }; }]);