AngularUI路由器：用相同的URL模式多种状态 [英] AngularUI Router: multiple states with same url pattern

问题描述

嘿所有我遇到我以为会是一个常见的​​路由问题，但我无法找出一个解决方案。基本上我的页面有两种状态，基本和高级的，我想要的网址模式是相同的两个国家，但只在当时加载当前状态的模板（这是从控制器内过渡到）

Hey all I'm running into what I thought would be a common routing problem, but I'm unable to figure out a solution. Basically my page has two states, basic and advanced, and I want the URL patterns to be the same for both states but only load the template for the current state at the time (which is transitioned to from within a controller)

config(function ($stateProvider) {

  $stateProvider.state('basic', {
    url: '/:post',
    templateUrl: function (stateParams) {
      return 'post-' + stateParams.post + '-tmpl.html';
    }
  });

  $stateProvider.state('advanced', {
    url: '/:post',
    templateUrl: function (stateParams) {
      return 'post-' + stateParams.post + '-advanced-tmpl.html';
    }
  });
})

controller('myCtrl', function ($state) {
  //
  // In this case, I would expect only the template from
  // the advanced state to load, but both templates are trying
  // to load.
  $state.transitionTo('advanced', {post: 2});
}

我认为导航到匹配模式加载给定的状态这就是为什么它匹配时，两个模板尝试加载。是否有某种方式来完成只对当前状态基于同一URL模式，但不同的模板？

I assume that navigating to the matched pattern loads the given state which is why when it matches, both templates attempt to load. Is there some way to accomplish the same url pattern but with different templates based only on the current state?

推荐答案

假设你不能有两个国家使用相同的URL，你为什么不走和两个状态合并成一个？ UI的路由器已经可以让你有一个自定义函数返回的模板。你只需要添加另一个隐藏的自定义参数（姑且称之为高级）的状态声明：

Assuming that you cannot have two states with the same URL, why don't you go along and merge the two states into one? Ui-router already allows you to have a custom function to return the template. You just need to add another, hidden custom parameter (let's call it advanced) to the state declaration:

$stateProvider.state('basicOrAdvanced', {
  url: '/:post',
  templateUrl: function (stateParams) {
    if (stateParams.advanced) {
      return 'post-' + stateParams.post + '-advanced-tmpl.html';
    } else {
      return 'post-' + stateParams.post + '-tmpl.html';
    }
  },
  params: {
    advanced: False
  }
});

然后你把它叫做：

And then you call it with:

$state.transitionTo('basicOrAdvanced', {post: 2, advanced: True})

---

有关处理嵌套状态的另一种可能的解决方案和通用控制器，看问题＃217 并＃1096 UI路由器的GitHub的页面上。

---

For another possible solution with nested states and a common controller, see issues #217 and #1096 on ui-router's github page.

解决方案presented那里创建了一个第三国的控制器执行调度工作，而这两个国家要在（基本和<$ C $降落C>高级）具有空网址：

The solution presented there creates a third state whose controller does the dispatching work, whereas the two states you want to land in (basic and advanced) have empty URLs:

$stateProvider.state('basicOrAdvanced', {
  url: '/:post',
  controller: function($state, $stateParams) {
    if($stateParams.advanced) {
        $state.go('advanced', {post: $stateParams.post});
    } else {
        $state.go('basic', {post: $stateParams.post});
    }
  },
  params: {
    advanced: False
  }
}

此解决方案是更好，如果你在美国比方面有差异的简单 templateUrl （例如，如果他们有完全独立的控制器等。）

This solution is better if your states differ in more aspects than the simple templateUrl (e.g. if they have completely separate controllers, etc.)

另请参阅<一个href=\"http://stackoverflow.com/questions/23344055/angular-ui-router-different-states-with-same-url\">another有关类似问题在计算器上的问题。

Also see another question on StackOverflow about a similar issue.

这篇关于AngularUI路由器：用相同的URL模式多种状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！