当用户进入嵌套状态时如何在父视图中隐藏内容并在用户返回父视图时再次显示？

Question

我使用 ui-router 并有两个嵌套视图。 当用户进入子状态时，我想在父视图中隐藏一些 html 内容，并在用户返回父视图时再次显示。 任何人都可以提出如何实现这一目标的建议吗？

使用根范围和状态更改事件很容易做到这一点，但它看起来很脏，不是吗？

app.js

'use strict';
var myApp = angular.module('myApp', ['ui.router']);

myApp.controller('ParentCtrl', function ($scope) {
    $scope.hideIt = false;
});

myApp.controller('ChildCtrl', function ( $scope) {
    $scope.$parent.hideIt = true;
});

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('parent', {
            url: '/parent',
            templateUrl: 'parent.html',
            controller: 'ParentCtrl'
        })
        .state('parent.child', {
            url: '/child',
            template: '<h2>Child view</h2>',
            controller: 'ChildCtrl'
        });
});

parent.html

<h2>Parent view</h2>
<div ng-hide="hideIt">
    <p>This text should be hidden when the user goes to the nested state.</p>
</div>
<a ui-sref="parent.child">Go to the nested view</a>
<div ui-view></div>

Answer 1

一个简单的解决方案是在父模板中填充ui-view 标记，其中包含您希望在加载子状态时消失的内容。

<ui-view>
  <h2>Parent view</h2>
  <div ng-hide="hideIt">
  <p>This text should be hidden when the user goes to the nested         state.</p>
<a ui-sref="parent.child">Go to the nested view</a>
</ui-view>

Answer 2

您应该为此检查命名视图。这可能是最好的方法。 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

另外，这里有另一个帖子回答了这个问题：https://stackoverflow.com/a/19050828/1078450

这是嵌套命名视图的工作代码，取自该线程：

angular.module('myApp', ['ui.state'])
  .config(['$stateProvider', '$routeProvider',
    function($stateProvider, $routeProvider) {
      $stateProvider
        .state('test', {
          abstract: true,
          url: '/test',
          views: {
            'main': {
              template: '<h1>Hello!!!</h1>' +
                '<div ui-view="view1"></div>' +
                '<div ui-view="view2"></div>'
            }
          }
        })
        .state('test.subs', {
          url: '',
          views: {
            'view1@test': {
              template: "Im View1"
            },
            'view2@test': {
              template: "Im View2"
            }
          }
        });
    }
  ])
  .run(['$state', function($state) {
    $state.transitionTo('test.subs');
  }]);

http://jsfiddle.net/thardy/eD3MU/

编辑：

在 angular-breadcrumbs 评论中添加一些想法。我自己没有使用过它，但乍一看似乎子路由不应该破坏面包屑。我只是在看他们演示的源代码，在第 62 行左右。我必须把它全部转起来才能真正开始测试它，但看起来他们在指定视图时几乎做同样的事情，并且它在那里工作：https://github.com/ncuillery/angular-breadcrumb/blob/master/sample/app.js#L62

  .state('room', {
    url: '/room',
    templateUrl: 'views/room_list.html',
    controller: 'RoomListCtrl',
    ncyBreadcrumb: {
      label: 'Rooms',
      parent: 'sample'
    }
  })
  .state('room.new', {
    url: '/new',
    views: {
      "@" : {
        templateUrl: 'views/room_form.html',
        controller: 'RoomDetailCtrl'
      }
    },
    ncyBreadcrumb: {
      label: 'New room'
    }
  })
  .state('room.detail', {
    url: '/{roomId}?from',
    views: {
      "@" : {
        templateUrl: 'views/room_detail.html',
        controller: 'RoomDetailCtrl'
      }
    },
    ncyBreadcrumb: {
      label: 'Room {{room.roomNumber}}',
      parent: function ($scope) {
        return $scope.from || 'room';
      }
    }
  })

编辑2：

此解决方案不会将路线合并为一个碎屑

查看官方演示

回复：But I use angular-breadcrumb and in your solution they will be combined into one crum.