2012-12-04 5 views
9

Ein Teil dieser App ruft HTML vom Server zurück, der als Live-HTML angezeigt werden muss. Das ist mit der ng-bind-html-unsafe="expression" Direktive (in Angular 1.0.2 mindestens) leicht gemacht.HTML mit Skripten einfügen, die ausgeführt werden sollten

Der HTML-Code enthält jedoch auch JavaScript, das ausgeführt werden sollte, da es Funktionen definiert, die im HTML-Code verwendet werden, und dies scheint bei der Verwendung der Direktive nicht der Fall zu sein.

Gibt es einen Winkel-Stil Weg, das zu tun? Oder muss ich Out-of-Band-Ladetechniken ausprobieren?

(Bitte lassen Sie uns nicht darüber diskutieren, ob ich den Server vertrauen sollte genug Java-Script sendet er mir laufen. Ich mache den Server vertrauen, ich bin der Risiken bewusst, und dies ist eine sehr spezielle Situation.)

+0

Kann das Skript im geladenen HTML ein Angular Controller sein? Wenn nicht, dann denke ich, dass es als Angular nicht möglich ist (es ist tatsächlich jquery, dass sie htmls laden) ignoriert die Skript-Tags. Es gab eine Diskussion darüber vor einiger Zeit auf den Google-Gruppen. – matys84pl

+0

Nein, ich kontrolliere nicht das Format des HTML. Es handelt sich um einen ColdFusion- oder Railo-Variablen-Dump, der, wie die CFML-Engine es für richtig hält, mit js erzeugt wird, um Teile davon zu erweitern und zu reduzieren. Plain altes eigenständiges HTML mit eingebetteter js. Ich benutze nicht die volle jQuery (bisher), nur Angulars eingebaute jQqLite, aber die Prinzipien sind wahrscheinlich die gleichen. Ironischerweise streift es die Funktionen, lässt aber die Onclicks, die sie aufrufen, so dass beim Klicken Fehler auftreten. – enigment

Antwort

7

Sie müssen jQuery (laden Sie es vor Angular):

„wir in der Unterstützung Script-Tags in jqlite gesucht, aber was eine Cross-Browser-Unterstützung zu erhalten getan werden muss, um erfordert eine Menge schwarzer Magie aus diesem Grunde uns. beschlossen, dass wir jetzt nur empfehlen, dass Benutzer jquery zusammen mit eckigen in diesem speziellen Fall verwenden "- https://groups.google.com/d/msg/angular/H4haaMePJU0/5seG803by5kJ

Siehe auch AngularJS: How to make angular load script inside ng-include?

+0

Ich markiere dies als richtig, mit der Einschränkung, dass es leichtere Lösungen gibt, die in begrenzten Fällen gelten können. [Igor weist darauf hin] (https://github.com/angular/angular.js/issues/369) dass, um völlig korrekt zu sein, Angular den HTML-Code vor jedem Skript-Tag analysieren und anhängen, das Skript erstellen und dann fortfahren müsste ähnlich mit dem Rest des HTML. In einigen Fällen ist es jedoch ausreichend, den gesamten HTML-Code einzufügen und anschließend alle darin eingebetteten Script-Tags zu finden und auszuführen, was einfacher erfolgen kann. – enigment

6

Ich kann meine Variante vorschlagen. Zuerst sollten Sie Anweisung erstellen:

app.directive('html', [ function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     element.html(attrs.html); 
    } 
    } 
}]); 

Dann können Sie es innerhalb Tag verwenden.

<div html="{{code}}"></div> 
+2

mit einer ähnlichen richtlinienbasierten Lösung hat für mich gearbeitet – yash

Verwandte Themen