8

この質問は、「状態を変更するときに兄弟の ui ビューを保持するにはどうすればよいですか」 ( 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 に答える