在 Angular 中声明视图时添加额外的 'views:{'foo':{}}' 的目的是什么？答案

【问题标题】：What's the purpose of adding the extra 'views:{'foo':{}}' when declaring a view in angular?在 Angular 中声明视图时添加额外的 'views:{'foo':{}}' 的目的是什么？
【发布时间】：2015-11-20 00:57:52
【问题描述】：

用views:{}例如声明a视图的目的是什么

.state('app.example', {
    url: "/example",
    views: {
      'my-example': {
        templateUrl: "views/example.html",
        controller: 'myCtrl'
      }
    }
  })

与此相反

 .state('app.example', {
        url: "/example"
        templateUrl: "views/example.html",
        controller: 'myCtrl'
        }
      })

【问题讨论】：

标签： angularjs model-view-controller view angular-ui-router

【解决方案1】：

它用于为单个状态提供多个并行视图。示例：

.state('app.example', {
    url: "/example",
    views: {
        "example1": {
            template: 'app.example.view1'
        },
        "example2": {
            template: 'app.example.view2'
        }
    }
})

index.html

<ui-view = "view1">
</ui-view>

<ui-view = "view2">
</ui-view>

如此有效，您的状态有两个平行的视图。你可以找到详细解释here。

【讨论】：

好吧，这就是为什么它们被用于选项卡和侧视图/侧边菜单的原因。在处理多个并行视图的子状态时，这将如何工作（什么是最佳实践）？
抱歉，从未将嵌套状态用于并行视图。也许将此作为一个单独的问题？

【解决方案2】：

用于在单个页面（状态）上显示多个视图。当我们在单个页面上显示多个并行视图时，我们使用上述方法。假设您有一个页面，您必须在不同的位置显示不同的图表，我们创建了多个视图并在这些位置上附加了图表。希望这会有所帮助

【讨论】：

【解决方案3】：

好的，我想通了，为此我创建了一个codepen 以使其很好地适应其他离子应用程序。这会在按下按钮或侧边菜单项时更新子视图，并通过使多个子视图共享这样的名称

，在 codepen 内提供更多详细信息

     views: {
            'shared-child-view' :{
              templateUrl: "[path to your children, in our case child1.html and child2.html]"
            }
          }`

看起来像这样的地方

 .state('sidemenu.parent.child1', {
      url: "/child1",
      views: {
        'shared-child-view' :{
          templateUrl: "child1.html"
        }
      }
    })
       .state('sidemenu.parent.child2', {
      url: "/child2",
      views: {
   'shared-child-view': {
     templateUrl: "child2.html"
   }
 }
    })
`

它可以位于像这样处于抽象状态的父级中（但它不是必须的，但很可能这就是您的 ionic 应用程序的设置方式）：

.state('sidemenu', {
  url: "/sidemenu",
  abstract: true,
  templateUrl: "sidemenu.html"
})
.state('sidemenu.parent', {
  url: "/parent",
  views: {
    'menuContent' :{
      templateUrl: "parent.html"
    }
  }
})

您可以交替或更改视图中的每个子视图以使用相同名称的 evrey 视图，在本例中为“shared-child-state”

  <div ui-view name="shared-child-view"></div>

并且可以通过

使其可点击

<a href="#/sidemenu/parent/child2" class="item">Child View 2
              </a>

如果您使用ui-serf，这将不起作用。

我希望这对某人有帮助！

【讨论】：