6

動的ルートで利用可能な html をレンダリングしようとしています。ルートは$http.get()呼び出しを介してフェッチされ、html を返します。

例を挙げると、この html パーシャルをロードしようとしています。

<h1>{{ pagetitle }}</h1>
this is a simple page example

問題を模擬するために小さなフィドルを作成しましたが、簡単にするために、http 呼び出しを残して、スコープの文字列に html を追加しました。

コントローラーは次のとおりです。

function Ctrl($scope) {
    $scope.data = {
        view: "<h1>whaaaaa</h1>"        
    }; 
}

ページのhtmlは次のとおりです。

<div ng-app="">
  <div ng-controller="Ctrl">
    <div ng-include src="data.view"></div>
  </div>
</div>

問題は、文字列を html ファイル (ng-include) に追加しないことですが、明らかにその文字列で作成された URL への http 呼び出しを行います。

では、インクルードに文字列を入力することはできませんか? そうでない場合、動的 URL への http 呼び出しを行い、返された URL をページに入力する適切な方法は何ですか。

JSFiddleで遊ぶことができます。

4

4 に答える 4

13

テンプレート キャッシュに静的フックを追加できるので、テンプレートを取得するサービスがあるとします。

myApp.service('myTemplateService', ['$http', '$templateCache', function ($templateCache) {
  $http(/* ... */).then(function (result) {
    $templateCache.put('my-dynamic-template', result);
  });

  /* ... */
}]);

次に、次のことができます。

<div include src=" 'my-dynamic-template' "></div>

注参照名は一重引用符で囲む必要があります。これは常にバイトになります....注

angularがURLを解決しようとする前に、テンプレートキャッシュに割り当てる必要があることに注意してください。

編集：

動的 URL ロジックが十分に単純な場合は、ng-include で条件を使用することもできます。

<div ng-include="isTrue() && 'template1.html' || 'template2.html'"
于 2013-08-09T14:45:51.403 に答える
7

ng-includeではできません。参照：

ngInclude|src – {string} – URL に評価される角度式。ソースが文字列定数の場合は、src="'myPartialTemplate.html'" のように必ず引用符で囲んでください。

次のようにng-bind-html-unsafeを直接使用します。

<div ng-bind-html-unsafe="data.view"></div>

Demo

式を現在の要素に評価した結果を innerHTML するバインディングを作成します。innerHTML 化されたコンテンツはサニタイズされません! ngBindHtml ディレクティブの制限が厳しすぎる場合、およびバインド先のコンテンツのソースを完全に信頼する場合にのみ、このディレクティブを使用する必要があります。

于 2013-08-09T14:38:43.477 に答える
5

使用できますng-bind-html-unsafe

ajax リクエストからの html が信頼できない場合は、動作にサービスng-bind-htmlが必要なhtml を使用することもできます ( DEMO )。$sanitize

<div ng-bind-html="data.view"></div>

これを使用するには、追加の js ファイルを含める必要があります。

angular.module('app', ['ngSanitize']);

もちろん、アプリを ng-app に追加します。

<div ng-app="app">
于 2013-08-09T14:39:31.253 に答える
1

ng-includeHTML 文字列ではなく、外部 HTML フラグメントへの URL が必要です。

あなたがしたいng-bind-html-unsafe：

デモを更新しました。

于 2013-08-09T14:41:09.950 に答える