Was ist der richtige Weg, um externes HTML in einem Angular Controller zu importieren und zu kompilieren?

Question

Ich wette, diese Frage ist schon irgendwo beantwortet, aber ich komme leer.

Ich benutze Angular 1.5.7 und möchte etwas externes HTML in meinem Projekt in einen Komponenten-Controller importieren (um es in einem Tooltip zu verwenden), und ich kann nicht herausfinden, wie es geht.

innerhalb eines Ordners Meine Struktur ist einfach so:

• component.js
• component_template.html
• other_html.html

ich folgendes versucht haben, mit WebPack mit den Ladeprogrammen html und ngTemplate (in meiner Webpack-Konfiguration konfiguriert): Über meiner Controller-Deklaration füge ich

hinzu

import other_html from './other_html.html'; 

was genau das ist, wie ich die Vorlage für die Ansicht zu erhalten (und welche ohne weitere Umschweife funktioniert):

import component_template from './component_template.html'; 
angular.module(module).component('name', {templateUrl: component_template}, ...); 

Innerhalb des Component-Controller, ich verschiedene Kombinationen von $ sce.trustAsUrl versucht haben, $ sce.getTrustedHtml und $ sce.getTrustedUrl, um den Inhalt meines externen HTML (in der Variable 'other_html') als String auszupacken, aber ehrlich gesagt verwirren mich diese Dinge nur und die Dokumentation hilft nicht. Es scheint auch, dass ich die resultierende Zeichenfolge gegen den Bereich meines Controllers kompilieren muss, aber ich brauche zuerst eine HTML-Zeichenfolge (ich bin am Ende mit einer URL-Zeichenfolge).

Kann mir jemand den besten Weg demonstrieren, dies zu tun, mit oder ohne sich auf WebPack und die html und ngTemplate Loader im Prozess zu verlassen?

Danke

Answer 1

Beantworten Sie meine eigene Frage. Nicht meine vollkommene Lösung, weil ich keine Werte von meinem importierten HTML kompiliere, also zerstückele ich es, um als kleinere Fragmente zu steuern.

Zunächst einmal sollte ich nicht ngTemplate zu diesem Zweck in der Mischung verwendet haben. Zweitens besteht der Weg darin, Ihrer Ladekette ein Ausrufezeichen voran zu setzen, um den Standard von Ihrer Webpack-Konfiguration zu überschreiben.

So funktioniert das mich mit der Zeichenfolge bereitzustellen ich brauche:

var other_template = require('!html!./other_template.html');

Da ich die Zeichenfolge bin mit einem Tooltip (jQuery tipso mit einer Verpackungsrichtlinie) zu füllen und erfordert Werte nur verfügbar Im $ onInit-Callback meiner Komponente glaube ich nicht, dass ich sogar die Möglichkeit habe, es gegen meinen Scope zu kompilieren, bevor es als Ausgabe ausgegeben wird. Aber in anderen Fällen bin ich mir sicher, ich könnte es kompilieren und die Dinge funktionieren wie erwartet.

Hoffe vielleicht hilft dies anderen.