8

这个问题基于“如何在更改状态时保留同级 ui-views”（plunker）。

当我更改主导航（mainNav）中的状态时，我尝试保持视图（内容）不变。

内容只能由子导航设置，并在更改主导航时保留。

即使状态离开，是否有可能在 ui-router 中保留视图？

angular.module('MyApp', [
  'ui.router'
])
  .config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('index', {
      url: '/',
      views: {
      '@': {
        templateUrl: 'layout.html'
      },
      'mainNav@index': {
        template: '<a ui-sref="Main3">Main3 - with sub</a><br />'
                + '<a ui-sref="Main4">Main4 - with sub</a>'
      },
      'subNav@index' : {
        template: '<p>This is the sub navigation</p>'
      }, 
      'content@index': {
        template: '<p>Content shared for MAINs</p>'
      }
    }
  })
  .state('Main3', {
    parent: 'index', 
    url: '/Main3',
    views: {
      /*'mainNav': {

      },*/
      'subNav': {
        template: '<a ui-sref="Main3.Sub1">Main3.Sub1</a><br />'
        + '<a ui-sref="Main3.Sub2">Main3.Sub2</a>'
      }
    }
  })
  .state('Main4', {
    parent: 'index', 
    url: '/Main4',
    views: {
      'subNav': {
        template: '<a ui-sref="Main4.Sub1">Main4.Sub1</a><br />'
        + '<a ui-sref="Main4.Sub2">Main4.Sub2</a>'
      }
    }
  })

   .state('Main3.Sub1', {
    url: '/Sub1',
    views: { 'content@index': { template: 'Content of Main3.Sub1' } }
  })
  .state('Main3.Sub2', {
    url: '/Sub2',
    views: { 'content@index': { template: 'Content of Main3.Sub2' } }
  })
  .state('Main4.Sub1', {
    url: '/Sub1',
    views: { 'content@index': { template: 'Content of Main4.Sub1' } }
  })
  .state('Main4.Sub2', {
    url: '/Sub2',
    views: { 'content@index': { template: 'Content of Main4.Sub2' } }
  })

});

我在更改到另一个状态时发现了 Persist 状态，但它并没有完全解决问题。状态是持久的，但没有考虑在导航到不同状态时保持视图一致。

4

2 回答 2

1

是的，它很容易，但是它有其局限性：将您需要的数据存储在父级范围内。

$state.state('parent', {
     controller:'ParentController'
});

$state.state('parent.child1', {
    controller:'ChildController'
});

$state.state('parent.child2', {
    controller:'ChildController2'
});
// in Parent controller
$scope.context = {};// it important to create a intermediary field that will store the data, otherwise you might have a problem with scopes inheritance

// in Child controller
$scope.context.toto = 'titi';

// 在其他子控制器中 $scope.context.toto = 'woof';

注意：如果您使用 controllerAs 语法，我不知道这是否可行。

我个人将它用于带有下一个/后退按钮的多页表单。

于 2016-04-18T08:31:02.270 回答
1

沃尔夫拉特的回答似乎是正确的。我只是想详细说明，也许了解您在寻找什么。这就是我认为你要求的：

// app.js 
...
$stateProvider
  .state('nav', {
    url: '/',
    templateUrl: 'app/templates/nav.html',
    controller: 'NavCtrl as nav',
    abstract: true
  })
  .state('nav.subNav', {
    url: 'subNav/',
    templateUrl: 'app/templates/subNav.html',
    controller: 'subNavCtrl as subNav',
    abstract: true
  })
  .state('nav.subNav.index', {
    url: 'index',
    templateUrl: 'app/templates/index.html',
    controller: 'IndexCtrl as index'
  });
$urlRouterProvider.otherwise('/subNav/index');
...

在此示例中，您可以通过在导航状态中包含来设置默认视图abstract: true（注意：我从未尝试过深度三种状态，但它适用于两种状态）。这可能会给您想要的效果。

至于将子导航作为视图，应该是可能的，但我不确定是否建议使用这样的深层嵌套视图。这是否接近您正在寻找的内容？

于 2016-04-18T10:20:17.357 回答