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> <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';
      }
    }
  })

EDIT2：

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

参见官方演示

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

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

2 个答案:

编辑：

EDIT2：