Question

我正在查看一个具有ui-router设置的Angular应用程序

$stateProvider.state('thing-doer', {
            url: '/thing/:id',
            controller: 'ThingDoingCtrl',
            views: {
              'view': {
                templateUrl: 'some/view/thingdoer.html',
                controller: 'ThingDoingCtrl'
              },
              'onetypeofmode@thin-doer': {
                templateUrl: 'some/view/modeone.html'
              },
              'anothermode@thing-doer': {
                templateUrl: 'some/view/modetwo.html'
              },//etc

意图是一个内容基本相同但在不同模式之间切换的页面，用户可以在其中执行不同的操作

令我感到沮丧的是，如果你是新鲜的，你会回到基本模式......

在这些视图之间切换时是否可以更改URL？或者ui-router是否有更好的方式来表达切换模式的大部分不变页面的意图？

Answer 1

您可以使用包含带有视图占位符的模板的 root 抽象状态。让我们称这个州为“做事”＆＃39;：

$stateProvider.state('thing-doer', {
    url: '/thing/:id',
    abstract: true
    templateUrl: 'root/template/with-views.html'
  },

然后，您创建了儿童状态＆＃39; thing-doer＆＃39;，每个模式对应您要支持的模式：

$stateProvider.state('thing-doer', {
    url: '/thing/:id',
    abstract: true
    templateUrl: 'root/template/with-views.html'
  })
  .state('thing-doer.onetypeofmode', {
    url: 'onetypeofmode'
    views: {
      'onetypeofmode@thin-doer': {
        templateUrl: 'some/view/modeone.html'
    }
  })
  .state('thing-doer.anothermode', {
    url: 'anothermode'
    views: {
      'anothermode@thing-doer': {
        templateUrl: 'some/view/modetwo.html'
    }
  })

通过这种方式，您可以获得要支持的任何模式的URL：

＆＃39;的 /事情/：ID / onetypeofmode ＆＃39;当你在＆＃34; onetypeofmode ＆＃34;模式

＆＃39;的 /事情/：ID / anothermode ＆＃39;当你在＆＃34; anothermode ＆＃34;模式

Angular ui-router在更改视图时更改URL

1 个答案: