Question

当我进入子状态时，我想在根状态中隐藏象限ui-view的ui-view组件。怎么能实现这一点。

##index.html

<div ui-view="a">
</div>
<div ui-view="b">
</div>
<div ui-view="c">
</div>

##b.html

<div ui-view>
</div>

##config

$stateProvider.state('start', {
         'views': {
                   'a': {
                        templateUrl: ...
                        },
                   'b': {
                         templateUrl: 'b.html'
                        },
                   'c': {
                         templateUrl: ...
                        }
                  },
           controller: 'indexController
         }).state('start.all', {
                   templateUrl: 'd.html',
                   controller:  'allController'
                 });

所以当我到达start.all时，我希望ui-view标记的c消失。我怎样才能做到这一点。

Answer 1

下面讨论了an example演示方法。我要说的是ui-router的本地方式是管理当前（活动）状态的所有视图。我们可以用：

查看姓名 - Relative vs. Absolute Names

...在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，状态名称是州的绝对名称，例如 contact.item

在我们的例子中，视图的全名＆＃39; c＆＃39;将c@，即c作为视图名称，@作为分隔符，空字符串表示根（有点奇怪但实际上是逻辑的）。

我们可以像这样更改start.all定义：

.state('start.all', {
    url : '/all',
    'views': {
      '': {
        template: '<span>this is start ALL</span>',
      },
      'c@': {
        template: '<span></span>',
      },
    },
  })

我们将更改根目录中c视图的内容。这应该是ui-router最本土的方式。它没有有效地删除它，但我们可以用一些空的东西替换它。

此外，在上面的示例中，我将名为bController的控制器放置为indexController的对比示例：

.state('start', {
    url : '/start',
    'views': {
      'a': {
        template: ...
      },
      'b': {
        template: ...
        // HERE a new controller bController
        controller: 'bController', 
      },
      'c': {
        template: ...
      }
    },
    // the orginal contoller
    controller: 'indexController',
  })

并以这种方式定义它们：

.controller('indexController', function($scope, $state, $stateParams) {
  console.log('indexConroller was invoked');
})
.controller('bController', function($scope, $state, $stateParams) {
  console.log('bConroller was invoked');
})

为什么呢？为了告诉你，永远不会调用indexController。控制器属于模板/视图而不是... ...

一起检查所有here

Answer 2

你可以通过几种方式实现这一目标。一种方法是使用包含视图a和b的抽象状态。然后，该抽象状态具有两个具体的子状态：start，其中添加了视图c，而all则添加了视图d。

另一个选择是在c视图的根元素上使用ng-show指令绑定到某个范围变量。我会选择第一个选项。

值得注意的是，这不会回答这个问题，因为all不再是start的孩子。如果all确实需要继承start（目前似乎没有必要），您只需将start抽象为start.main并{ {1}}。

虽然Radim的解决方案非常聪明且非常受欢迎，但我认为这比使用空模板覆盖父视图更具可读性和直观性。

start.all

处于子状态时隐藏父母的ui-view象限

2 个答案: