Pouvez-vous changer templateUrl à la volée?
Est-il possible de changer templateUrl à la volée en passant valeurs du champ de la directive?
Je veux transmettre des données au contrôleur au rendu de la page, sur la base des données qui sont passés de la directive
peut-être quelque chose qui ressemble à ça:
<div>
<boom data="{{myData}}" />
</div>
.directive('boom', function {
return {
restrict: 'E',
transclude: true,
scope: 'isolate',
locals: { data: 'bind' },
templateUrl: "myTemplate({{boom}}})" //<- that of course won't work.
}
});
Vous devez vous connecter pour publier un commentaire.
C'est possible, mais lorsque votre modèle à chargement dépend de certains champs de données vous ne pouvez pas utiliser la directive
templateUrl
propriété de plus et vous serez obligé d'utiliser les API de bas niveau, à savoir$http
et$compile
.À peu près ce que vous devez faire (seulement possible dans la fonction de liaison) est de récupérer le contenu du modèle à l'aide de
$http
(n'oubliez pas d'impliquer$templateCache
!) et puis compilez contenu du modèle "manuellement".Cela peut sembler beaucoup de travail, mais dans la pratique, il est plutôt simple. Je vous suggérerais d'avoir un coup d'oeil à la
ngInclude
directive sources où ce modèle est utilisé.Voici un squelette de cette directive:
en supposant qu'il serait utilisé comme
<boom data='name'></boom>
. Travail débarquez ici: http://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=previewVeuillez noter que j'ai changé les attributs de l'évaluation de
{{name}}
pour les attributs de l'analyse depuis probablement un modèle doit être déterminée une seule fois, au début.data
dans mon cas? Je suis en train attrs.de données, mais il renvoieundefined
$compile
échoue lorsque vous n'avez pas inclure jQuery avant Angulaire.\C'est une nouvelle fonctionnalité dans Angulaire versions 1.1.4+ je viens de découvrir si j'utilise l'instabilité actuelle de l' (1.1.5), vous pouvez passer d'une fonction dans le modèle d'url d'une directive. Le deuxième paramètre de la fonction est la valeur de l'attribut directive comme indiqué ci-dessous.
Voici un lien vers le inédit docs montrant le changement officiel.
À utiliser
partials/template1.html
que le modèle d'url à partir deHtml:
Directive:
(element, attributes)
J'ai changé la réponse de pkozlowski.opensource un peu.
À partir de:
À:
Qui a fonctionné pour moi et il est possible d'utiliser
dans la directive.
iAttrs.data
a une valeur (qui peut être vu si vous vous connectez leiAttrs
objet), c'estundefined
lorsque vous essayez d'y accéder.J'ai eu le même problème
JS:
JS:
HTML:
C'est un suivi de réponse qui répond à quelques questions avec les réponses précédentes. Notamment, il ne compilera les modèles (ce qui est important si vous avez beaucoup de ceux-ci sur votre page, et il permettra de surveiller les modifications apportées au modèle après qu'il a été lié. Il a également des copies de la classe et le style de l'élément d'origine pour le modèle (mais pas dans la très élégante façon angulaire n'en interne lorsque vous utilisez "remplacer: true". Contrairement à l'actuelle angulaire de la méthode de prise en charge à l'aide d'une fonction de modèle ou templateUrl, vous pouvez utiliser le champ de l'information afin de déterminer le modèle à charger.
Cette question sera fixé avec ng-inclure comme suit:
Appeler le switchTemplate fonction arbitraire de temp paramètre dans la fonction de lien de la directive.
Ces réponses sont bonnes, mais pas professionnel. Il y a une syntaxe de l'aide
templateUrl
, dont nous n'avons pas l'utiliser souvent.Il peut être une fonction qui retourne une url.Cette fonction a quelques arguments. Si vous souhaitez plus de détails ici est un endroit frais à l'articlehttp://www.w3docs.com/snippets/angularjs/dynamically-change-template-url-in-angularjs-directives.html
templateURL
fonction.