0

この質問はすでにどこかで答えられていると思いますが、空っぽになります。

私は Angular 1.5.7 を使用しており、プロジェクト内の外部 HTML を (ツールチップで使用するために) コンポーネント コントローラーにインポートしたいと考えていますが、その方法がわかりません。

フォルダー内の私の構造は次のようになります。

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

html および ngTemplate ローダー (webpack 構成で構成) で WebPack を使用して、次のことを試しました: コントローラー宣言の上に、追加します

import other_html from './other_html.html';

これは、ビューのテンプレートを取得する方法とまったく同じです (そして、これ以上苦労する必要はありません)。

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

コンポーネント コントローラー内で、$sce.trustAsUrl、$sce.getTrustedHtml、および $sce.getTrustedUrl のさまざまな組み合わせを試して、外部 HTML (変数「other_html」内) のコンテンツを文字列としてアンラップしましたが、率直に言って、これらは物事は私を混乱させるだけで、ドキュメントは役に立ちません。結果の文字列をコントローラーのスコープに対してコンパイルする必要があるようにも見えますが、最初に HTML 文字列が必要です (URL 文字列で終わります)。

プロセスで WebPack と html および ngTemplate ローダーに依存するかどうかに関係なく、これを行うための最良の方法を誰かが私に示すことができますか?

ありがとう

4

1 に答える 1

0

私自身の質問に答えます。インポートした HTML から値をコンパイルしていないため、完全に私の完璧なソリューションではありません。そのため、小さなフラグメントとして制御するために分割しています。

まず、この目的のためにミックスで ngTemplate を使用するべきではありませんでした。第二に、それを回避する方法は、ローダー チェーンの前に感嘆符を付けて、webpack 構成のデフォルトをオーバーライドすることです。

したがって、これは必要な文字列を提供するために機能します。

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

文字列を使用してツールチップ (ラッピング ディレクティブを使用した jQuery のヒント) を入力し、コンポーネントの $onInit コールバックでのみ使用可能な値を必要とするため、終了する前にスコープに対してコンパイルする機会さえないと思います出力としてアップします。しかし、それ以外の場合は、コンパイルして期待どおりに動作させることができると確信しています。

これが他の人に役立つことを願っています。

于 2016-07-11T23:18:55.510 に答える