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

我正在尝试注入一个面板进行编辑,具体取决于观看者是否是所有者.现在,我只是将面板/局部视图注入到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>

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

在这里我创建了一个 working example,它应该给出所有的答案.

调整后的州定义是：

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

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

最重要的是,composition.views.view.html现在扮演兄弟视图thetool的目标角色.两个视图都在相同的状态(‘view’)上定义,但其中一个被注入另一个.

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

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

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

> allCompostions
>查看

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

小引用：

Behind the scenes,every view gets assigned an absolute name that follows a scheme of viewname@statename,where viewname is the name used in the view directive and state name is the state’s absolute name,e.g. contact.item. You can also choose to write your view names in the absolute Syntax.

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

.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" : { }

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

相关文章