Javascript Girl
  1. Javascript Girl
  3. Comment transmettre les paramètres directeurs à la directive
Intereting Posts
Document.write en chargeant les scripts dynamiquement Comment obtenir les données de requête de Extjs 4 sur l'événement Beforeload? Pourquoi et quand avons-nous besoin d'aplatir les objets JSON? Fermeture et fuite de la mémoire de rappel en javascript Levage variable – "var" avec nom de variable global en fonction Ce qui compte comme tâches intensives de la CPU (par exemple, tri, recherche, etc.?) Combinaison d'un sélecteur de classe et d'un sélecteur d'attributs avec jQuery Validation de formulaire avec Bootstrap (jQuery) Comment accéder à la valeur d'un bouton radio à l'aide du DOM? L'élément SVG perd les gestionnaires d'événements si déplacé autour du DOM Comment détecter le clic du bouton central de la souris? Lecture d'un tableau encodé json en javascript Remplacement du caractère newline en javascript Comment trouver une sélection dans un document HTML contenant des iframe ou des images Avertir l'utilisateur avant de quitter la page Web avec des modifications non enregistrées

Comment transmettre les paramètres directeurs à la directive

Besoin de votre aide. J'aimerais utiliser ma directive personnalisée avec des paramètres comme celui-ci: 

<p customImage URL_PARAM="some_url.jpg" FIG_PARAM="Fig 1."></p>

Ma cible est d'utiliser les paramètres de la directive dans le modèle comme ceci: 

 .directive('customImage', function() { return { replace: true, template: '<div> <img src="URL_PARAM"> FIG_PARAM </div>' }; });

Comment faire celui-ci?

En fonction de ce dont vous avez besoin, vous souhaitez généralement créer une portée de la directive pour les frères et sœurs (c'est-à-dire une portée qui ne dépasse pas la portée hiérarchique normale, héritant des niveaux supérieurs) pour permettre à plusieurs directives de vivre dans le même niveau sans affecter chacune Autres propriétés. Si vous consultez l' entrée de la documentation AngularJS pour les directives , sous l'objet de la définition de la directive, vous pouvez voir trois liens de propriété différents que vous pouvez spécifier dans la définition de la portée de votre directive. Prenez cette définition de portée de votre directive, à titre d'exemple: 

 scope: { urlParamAttr: '@URL_PARAM', urlParamEval: '=URL_PARAM', urlParamFn:'&URL_PARAM' }
  • @ / @name: cette définition va lier la valeur simple d'un attribut à la portée de la directive. Dans l'exemple, une propriété urlParamAttr sur votre champ de directive sera liée à l'attribut HTML simple URL_PARAM la directive. Ce sera toujours une chaîne car un attribut HTML est un nœud de texte et aura la valeur de some_url.jpg
  • = / = Nom: Cela liera l'évaluation de l'attribut dans le contexte de la portée de définition d'une propriété sur la portée de votre directive. Dans l'exemple, Angular tentera d'évaluer some_url.jpg et échouera car il n'est pas valable javascript. Si la directive a une valeur d'attribut de 'some_url.jpg' , elle sera évaluée en tant que chaîne (en raison des guillemets). Si la portée définissant votre directive a une propriété appelée imageUrl avec une valeur de some_url.jpg (une chaîne) et la directive URL_PARAM a la valeur imageUrl , Angular va lier la propriété de votre directive à la propriété imageUrl l'image de déclaration et la mettre à jour au fur et à mesure qu'elle change Un cycle de digest.
  • & / & Name: Cette définition va lier une propriété d'attribut et la traiter comme une fonction que votre directive peut appeler.Par exemple, si vous avez une propriété de on-click , un utilisateur pourrait mettre une fonction personnalisée à partir d'une autre portée appelée Du champ d'application de la directive.

Dans votre cas, vous pouvez traiter l'attribut comme HTML simple (et vous pouvez le modifier en fonction de vos besoins) et modifier votre modèle pour lier aux propriétés de la directive: 

 .directive('customImage', function() { return { replace: true, scope: { urlParam: '@URL_PARAM', figParam: '@FIG_PARAM' }, template: '<div> <img src="{{urlParam}}"/> {{figParam}} </div>' }; });