如何管理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

回答

相关问题