如何捕捉角度NG-包括错误 [英] how to catch angular ng-include error
问题描述
当我使用 NG-包括
作为标题,我该如何捕获错误时的地址(文件路径)不存在?
When I use ng-include
as a title, how do I catch the error when the address (file path) does not exist?
我完成了 NG-包括路由器
A 里面NG-预览(NG-路线)
,
这是一个有点像这样:
I finished a ng-include router
inside a ng-view(with ng-route)
,
It's a little bit like this:
ContentCtrl
var content = $route.current.params.content,
tmplArr = content.split("_"),
tmpl = {},
personId=$route.current.params.personId||$scope.persons[0].id;
$scope.personId=personId;
tmpl.url = "content/";
for (var i = 0, len = tmplArr.length; i < len; i++) {
tmpl.url += tmplArr[i] + "/";
}
tmpl.url = tmpl.url.substring(0, tmpl.url.length - 1) + ".html";
$scope.template = tmpl;
内容查看
<div ng-include="template.url" class="ng-animate"></div>
当我使用的地址是不存在的,如:/家庭/#/内容/ profile_asdfa,
角只是取一个循环的资源。
所以,我需要赶上NG-包括错误,当有哈希没有模板文件。
任何人可以帮助我吗? THX!
when I use the addr is not exist like:/home/#/content/profile_asdfa, the angular just fetch the resource in a loop. So I need to catch the ng-include error,when there is no template file in the hash. Can anybody Help me ? Thx!
推荐答案
展望中的source为ngInclude ,但似乎没有钩或方法时,模板不存在直接探测到404(或其它)错误。你可能要考虑功能要求增加这一点,因为这听起来像一个非常有用的功能。
Looking in the source for ngInclude, there seems to be no hook or way to detect directly a 404 (or other) error when the template doesn't exist. You might want to consider a feature request to add this, as it sounds like a useful feature.
不过,现在你可以做一个HTTP响应拦截器的东西。如果有一些方法来判断一个HTTP reguest是一个模板,说这是在内容的目录,你可以截取错误,并做一些与他们。例如,你可以使用自定义指令替换数据,即再发出一个事件使控制器(S)可以回应。
However, right now you could do something with a http response interceptor. If there is some way to tell if a http reguest is for a template, say it is in the 'content' directory, you can intercept errors, and do something with them. For example you could replace the data with a custom directive, that then emits an event so controller(s) could respond to it.
拦截器可以这样写:
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('templateInterceptor');
});
// register the interceptor as a service
app.factory('templateInterceptor', function($q) {
return {
'responseError': function(rejection) {
var isTemplate = !!rejection.config.url.match(/^content/g);
if (isTemplate) {
rejection.data = '<div><template-error url="\''+ (rejection.config.url) + '\'"><strong>Error from interceptor.</strong></template-error></div>';
return rejection;
} else {
return $q.reject(rejection);
}
}
}
});
所以,当有取出由'内容'指令东西后一个错误,它增加了一个元素&LT;模板的错误&GT;
到位模板内容。当这个被编译,然后链接,它 $发出
SA自定义事件, templateError
,它与主控制器可以响应,通过 $范围。$关于
。因此该指令可以code像:
So when there is an error after fetching something from the 'content' directive, it adds an element <template-error>
in place of the template content. When this is compiled and then linked, it $emit
s a custom event, templateError
, which parent controllers can respond to, by $scope.$on
. So the directive can be code up like:
app.directive('templateError', function() {
return {
restrict: 'E',
scope: {
'url': '='
},
link: function(scope) {
scope.$emit('templateError', {url:scope.url});
}
};
});
然后在原 ngInclude
的家长控制器,可以响应该事件:
And then in the parent controller of the original ngInclude
, you can react to this event:
$scope.$on('templateError', function(e, data) {
$scope.templateError = true;
$scope.templateErrorUrl = data.url;
})
您可以看到在这个Plunker 的完整的工作code。虽然我认为这是稍微哈克,如果角团队决定增加一个 $发出
ED事件的code ngInclude
上的错误,那么它应该很容易只是删除拦截器/自定义元素。
You can see the full working code in this Plunker. Although I think this is slightly hacky, if the Angular team decide to add an $emit
ed event to the code of ngInclude
on error, then it should be easy to just remove the interceptor / your custom element.
这篇关于如何捕捉角度NG-包括错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!