用于编辑当前模板

Question

我的UI包含嵌套选项卡（使用Bootstrap）。有问题的选项卡是一个带有自己的控制器的模板，目前在具有UI-Router的视图中指定：

.state('editBase.edit', {
    url: '/:id',
    views: {
        'fooTab@editBase.edit': {
            templateUrl: 'foo.html',
            controller: 'FooController'
        },
        // more views...

模板使用ng-repeat创建链接列表。每个链接都转到编辑子状态：

<a ui-sref="editBase.edit.subEdit({itemId: item.id})">{{item.name}}</a>

单击链接时我想要发生的是用编辑器替换选项卡（列表）的内容。单击保存按钮后，列表将重新刷新。

我没有为列表寻找就地编辑器;我想隐藏整个列表，但保留周围的模板/选项卡。换句话说，我不想替换根视图。我怎么能这样做？

注意：我发现this post解释了多个嵌套视图和视图名称;这对我帮助很大。

Answer 1

在编辑状态下，创建一个定位列表<ui-view>

的视图

父州，仅供演示。父状态具有列表状态插入

的ui视图

$stateProvider.state({
  name: 'app',
  template: '<div ui-view="list"></div>'
});

列表状态的目标是＆lt; ui-view =“list”＆gt ;,这是由父状态创建的

$stateProvider.state({
  name: 'app.list',
  url: '/objects',
  views: {
    list: {
      controller: ...
      template: `<ul><li ng-repeat="..."></li></ul>
    }
  }
});

编辑状态的目标是＆lt; ui-view =“list”＆gt;由app州创建的。 ui-view之前已由app.list状态填写。但是，子状态的ui-view视图优先于父状态视图。

$stateProvider.state({
  name: 'app.list.edit',
  url: '/edit/:id',
  views: {
    "list@app": {
      controller: ...
      template: "<a ui-sref="^">Go back...</a><form>...</form>"
    }
  }
}) ;

这是一个展示它的工作人员：http://plnkr.co/edit/Uc39R2ZHUg2Ru3xyEkfe?p=preview