如何管理404錯誤加載指令模板AngularJS

在AngularJS指令的templateUrl參數dinamically定義。如何管理404錯誤加載指令模板AngularJS

'templates/' + content_id + '.html'

我不想制定規則，以檢查是否content_id值是有效的，它管理爲404錯誤，即如果模板不存在負載template/404.html（服務器裝載模板時返回404錯誤）代替。

我該怎麼做？

編輯：目前的答案建議使用響應錯誤攔截。在這種情況下，我怎麼知道響應是加載這個模板？

來源

2015-06-23 francadaval

我懷疑這會在服務器端進行更好的處理。 – Brandon

也許，但我想知道如何去做。 – francadaval

您需要編寫響應錯誤攔截。事情是這樣的：

app.factory('template404Interceptor', function($injector) { 
    return { 
     responseError: function(response) { 
      if (response.status === 404 && /\.html$/.test(response.config.url)) { 
       response.config.url = '404.html'; 
       return $injector.get('$http')(response.config); 
      } 
      return $q.reject(response); 
     } 
    }; 
}); 

app.config(function($httpProvider) { 
    $httpProvider.interceptors.push('template404Interceptor'); 
});

演示：http://plnkr.co/edit/uCpnT5n0PkWO53PVQmvR?p=preview

來源

2015-06-23 10:49:08 dfsq

爲什麼加了相同的答案半小時後@ NLN的答案嗎？ –

@NexusDuck當我添加我的答案NLN的一個不像現在看，它解決完全不同的問題比OP問。但現在它是一樣的權利，基本上是因爲它根據我的回答和我的演示更新:)只需檢查修訂歷史。 – dfsq

你說得對，我的壞 –

您可以創建一個interceptor來監視使用$http服務所做的所有請求，並攔截任何響應錯誤。如果您收到任何請求的狀態爲404，只需將用戶重定向到錯誤頁面（在您的案例中爲template/404.html）。

.factory('httpRequestInterceptor', function ($q) { 
    return { 
     'responseError': function(rejection) { 
      if(rejection.status === 404){ 
       // do something on error     
      } 

      } 
      return $q.reject(rejection); 
     } 
    }; 
});

您需要在您的配置功能中將攔截器推送到$httpProvider。

myApp.config(function ($httpProvider, $interpolateProvider, $routeProvider) { 
    $httpProvider.interceptors.push('httpRequestInterceptor'); 
});

這裏的demo

乾杯！

來源

2015-06-23 10:13:44 nalinc

這會攔截xhr中的任何404錯誤，不是嗎？所以如果我創建或使用其他指令，如果模板不存在，它將調用'templates/404.html'。 – francadaval

@francadaval：是的，這將攔截所有XHR所有響應狀態請求 – nalinc

如何管理404錯誤加載指令模板AngularJS

回答

相關問題