angular-ui/ui-router,如何使用$ stateProvider注入局部视图？

Question

我正在尝试注入一个面板进行编辑,具体取决于观看者是否是所有者.现在,我只是将面板/局部视图注入到html中时遇到了麻烦.我希望我的composition/views/view.html成为'基础'html页面,其中注入了partial.然后局部视图位于composition/views/partials/views.tools.html.有没有人看到我的$ stateProvider有问题可以解释为什么我不能将我的部分注入我的views.html？

这是我的$ stateProvider:

$stateProvider
        .state('all compositions', {
            url: '/compositions/recent',
            templateUrl: 'compositions/views/list.html'
        }). 
          state('view', {
                url: '/compositions/view/:compositionId',
                views: {
                'theTool':{
                 templateUrl:'compositions/views/partials/view.tool.html'   ,
                    controller: 'CompositionsController'
                }
                },
                templateUrl: 'compositions/views/view.html',
                controller: 'CompositionsController',

            }). //other states here

这是我的view.html标记(主要的html)

<div ui-view="theTool"></div>
<section data-ng-controller="CompositionsController" data-ng-init="findOne()">
    <h2>{{composition.title}}</h2>
    <div ng-bind-html="trustedContent"></div>
</section>

非常感谢任何帮助或建议.谢谢

Answer 1

在这里,我创建了一个工作示例,它应该给出所有答案.

调整后的州定义是:

$stateProvider
  .state('allCompositions', {
    url: '/compositions/recent',
    templateUrl: 'compositions.views.list.html'
  }).

state('view', {
  url: '/compositions/view/:compositionId',
  views: {
    '': {
      templateUrl: 'compositions.views.view.html',
      controller: 'CompositionsController',
    },
    'theTool@view': {
      templateUrl: 'compositions.views.partials.view.tool.html',
      controller: 'CompositionsController'
    }
  },

最重要的是,compositions.views.view.html现在正扮演着兄弟姐妹视角的目标角色theTool.两个视图都定义在相同的状态('view'),但其中一个被注入另一个.

同样在index.html中我做了这个改变:

<!--<div ui-view="theTool"></div>-->
<div ui-view=""></div>

所以现在我们确实有了未命名的 ui-view而不是named.这就是两个州的原因

• allCompostions
• 视图

现在正确渲染了未命名视图的目标.在这个例子中更多

有关视图插入逻辑的更多信息:

• 查看名称 - 相对名称与绝对名称

小引用:

在幕后,为每个视图分配一个遵循方案的绝对名称viewname@statename,其中viewname是视图指令中使用的名称,状态名称是状态的绝对名称,例如contact.item.您还可以选择以绝对语法编写视图名称.

来自同一来源的令人敬畏的例子:

.state('contacts.detail', {
  views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "info@contacts.detail" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }