2012-11-28 23 views
10

私は2 ng-includesを持つHTMLを持っています。 ng-include srcの1つがサーバに存在しない場合を考えてください。現時点では空白のHTMLを読み込むだけで、ブラウザのコンソールにはhttp-404ファイルが見つからないと表示されます。

この場合、デフォルトのエラーページ(これはサーバーに存在します)をその特定のdivのみにロードします。つまり、ngincludeでロードされた適切なdivでデフォルトエラーページとその他の部分を表示します。

私のロジックは、httpインターセプタを使用しています。ここで404コールが発生したときに、デフォルトエラーページを返すだけです。これはdivにのみロードする必要があります。正しいHTTPコールを嘲笑して、代わりにエラーページを送信するようにしてください。これは適切なdivにロードする必要があると想定しています。

しかし、これは起こっていません:)。私はデフォルトのwindow.load( '')を試してみました。しかし、それはページの上にロードされ、ページ間に存在します。

またはdiv idをキャプチャする必要がありますか?(デフォルトのエラーHTMLを読み込む)

これであなたの考えが必要です。

+0

あなたは何をしようとしているのでしょうか?恐らくおそらくフィドル –

答えて

16

このような状況を処理するには、httpインターセプタを使用することができます(こちらのドキュメントは$httpです)。

インターセプタは、404応答をキャッチし、サーバーから404.htmlページをロードし、 は私がしました状態コード200

とともに初期応答のためのデータとして設定する必要がありますそれを解決する方法を示すプロジェクトを作成しました。

リポジトリ:https://github.com/matys84pl/angularjs-nginclude-handling-404/

main.jsファイルを詳しく見てみましょう。

1

ng-include値を入力する前に、$ httpで目的のng-include URLを直接渡して、同様のことを行いました。

$http({ url: url, method: "GET", cache: $templateCache}).success(function(data) { 
     /* there was a template for this url - set the $scope property that 
     * the ng-include is using 
     */ 
     $scope.templateUrl = url; 
    }).error(function() { 
     // there was not a template for this url - set the default one 
     $scope.templateUrl = defaultUrl; 
    }); 

ここにトリックは$ HTTPにキャッシュ引数として$ templateCacheを渡している - これはフェッチされたURLが使用法をNGが-含ま同じキャッシュに格納されていることを意味し、あなたが有効なテンプレートを見つけたときにtemplateUrlプロパティに設定すると、ng-includeはテンプレートを再度取得する必要はありません。

関連する問題