更改用户界面视图模板，而无需更改网址 [英] Change ui-view template without changing URL

问题描述

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

I have the following states configuration (simplified):

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

当我输入 / BADURL ，如预期显示404错误。

When I enter /badurl, 404 error is shown as expected.

当我输入 /项目/ 123 ，应用程序的API被查询与指定的标识符项目。它返回成功或404 HTTP头项数据，如果项目无法找到。为了在全球范围内发现这样的错误，我写了一个HTTP拦截器：

When I enter /item/123, the application's API is being queried for item with specified identifier. It returns item data on success or 404 HTTP header if the item could not be found. In order to detect such errors globally, I wrote a http interceptor:

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

code ++工程，但是当商品的ID是错误的， /项目/ 123 URL修改 / 404 ，显示一个错误页面。

Code works but when the item's id is wrong, the /item/123 URL changes to /404 which shows an error page.

问题是 - 如何加载 404.html 查看到我的＆LT;格UI的视图＆gt;＆LT; / DIV＆GT; 元素的没有更改URL？

Question is - how to load the 404.html view into my <div ui-view></div> element without changing the URL?

有一个<一个href=\"http://stackoverflow.com/questions/20497970/how-to-change-ui-view-template-url-programatically\">similar问题但templateProvider似乎并没有解决我的问题。

There is a similar question but the templateProvider does not seem to address my problem.

推荐答案

解决方案由这个答案并@RadimKohler评论。删除网​​址从 NOTFOUND 路线：

Solution inspired by this answer and @RadimKohler comment. Remove url from notFound route:

$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);
    }
  };
});

这篇关于更改用户界面视图模板，而无需更改网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！