Question

我有以下状态配置（简化）：

$stateProvider
  .state(
    'showitem', 
     { url: '/item/{id}', templateUrl: 'showitem.html', controller: 'MyCtrl' }
  )
  .state(
    'notFound',
    { url: '^*path', templateUrl: '404.html'}
  );

当我输入/badurl时，404错误会按预期显示。

当我输入/item/123时，正在查询应用程序的API以查找具有指定标识符的项目。如果找不到该项，它将返回成功项目数据或404 HTTP标头。为了全局检测这样的错误，我写了一个http拦截器：

$httpProvider.interceptors.push(function($q, $location) {
  return {
    responseError: function(rejection) {
      if(rejection.status == 404)
        $location.path('/404');
      return $q.reject(rejection);
    }
  };
});

代码有效，但当商品的ID错误时，/item/123网址会更改为显示错误页面的/404。

问题是 - 如何将404.html视图加载到我的<div ui-view></div>元素而不更改网址？

有similar question，但templateProvider似乎无法解决我的问题。

Answer 1

受this answer和@RadimKohler评论启发的解决方案。从url路线中删除notFound：

$stateProvider
.state(
  'showitem', 
  { url: '/item/{id}', templateUrl: 'showitem.html', controller: 'MyCtrl' }
)
.state(
  'notFound',
  { templateUrl: '404.html'}
);

配置oterwise规则：

$urlRouterProvider.otherwise(function($injector, $location) {
  var $state = $injector.get('$state');
  $state.go('notFound');
  return $location.path();
});

最后，转到404 API错误的notFound路线：

$httpProvider.interceptors.push(function($q, $injector) {
  return {
    responseError: function(rejection) {
      if(rejection.status == 404)
        $injector.get('$state').go('notFound');
      return $q.reject(rejection);
    }
  };
});

更改ui-view模板而不更改URL

1 个答案: