5

ディレクティブを使用してコードをテンプレートに分割しています。これらのテンプレートを if 条件に基づいてロードします。現在、ネットワーク トラフィックを調べると、ng-if条件が満たされているかどうかに関係なく、Angular はすべてのテンプレートをクライアントに送信しています。

<div class="container">
    <ul>
        <template1 ng-if="taskCategory == 'condition1'"></template1>
        <template2 ng-if="taskCategory == 'condition2'"></template2>
        <template3 ng-if="taskCategory == 'condition3'"></template3>
    </ul>
</div>

以下は、私のディレクティブ テンプレートの 1 つの例です。

/* Directive Template */
.directive('template1', [function() {
    return {
        restrict: 'E',
        templateUrl: 'view/templates/template1.tpl.html'
    };
}])

これは予想される動作ですか？視覚的には期待通りに機能しています。ng-ifしかし、条件に基づいてデータが遅延ロードされるという印象を受けました。または、使い方を誤解していますng-ifか？

4

2 に答える 2

6

それは間違いなく予想される動作です。ng-if条件に基づいてDOMから要素を条件付きで削除します。要素は削除される前にレンダリングされます (そうでない場合、要素の複製が DOM に追加されます)。

この動作は、AngularJS: ngifドキュメントの最初の段落に記載されています。

于 2013-11-05T16:02:38.990 に答える
1

'view/templates/template1.tpl.html'template1ディレクティブを使用する最初のビューのコンパイル/リンク段階でロードされます。

HTML レスポンス (この段階ではテキストのみ) は $templateCache 内にキャッシュされ (angular はデフォルトでキャッシュされます)、ページ全体が更新されるまで 2 回目の ajax は発生しません。

この場合でも、次の ajax 呼び出しはブラウザーのキャッシュから提供され、304 Not Modified のみが表示される場合があります。HTML は静的ファイルであるため、適切なキャッシュ オプション (ETag ヘッダーなど) を指定して提供し、コードを変更した場合に再読み込みされるようにする必要があります (ユーザーに一時ファイルのクリアを求めることなく)。

于 2013-11-05T16:26:40.580 に答える