HTMLWie kompilieren Sie eine Vorlage in einer Direktive, bevor Sie sie an das DOM senden?
<body ng-app="myApp">
<div ng-controller="myController">
<my-template src="https://plnkr.co/img/plunker.png"></my-template>
</div>
</body>
JS
myApp.directive('myTemplate', function() {
return {
scope: {src: '@'},
template: '<img src="{{src}}"></img>'
}
});
In meinem Beispiel plnkr habe ich ein Bild, das dynamisch aus einer Richtlinie Vorlage geladen wird. Wenn Sie die Konsole beim Ausführen betrachten, können Sie einen Fehler sehen, der versucht, "https://run.plnkr.co/xLToRcEuT2Xr8he7/%7B%7Bsrc%7D%7D" zu laden, was die ungelöste Version der Vorlage ist (% 7B% 7Vsrc% 7D% 7D = {{src}}). Dies wird dann von angular als Bindung aufgenommen und der richtige img geladen.
Der Code funktioniert, aber ich mag es nicht, Fehler herumliegen zu haben. Ich brauche auch nicht die Bindings in der Vorlage hängen herum, sobald es in der Direktive gelöst wurde, da es bereits eine Bindung für das Elternelement gibt und die darunterliegenden Kinder nie unabhängig voneinander ändern werden.
Gibt es eine Möglichkeit, die Vorlage vor dem Senden an das DOM zu kompilieren, um a) die Bindungen zu entfernen und (hauptsächlich) b) diesen Fehler zu vermeiden.
Ich habe keine Konsolenfehler gesehen. Haben Sie versucht![]()
? ng-src anstelle von src –
Frode
Interessanterweise habe ich gerade überprüft (auf einem anderen Computer) und ich sehe die Konsolenfehler nicht mehr in diesem PLNKR. Ich habe es jedoch viel einfacher reproduziert, ohne eine Direktive zu haben:
. ng-src hat es repariert, also danke. –
drakkanraz