angularjs – angular-ui / ui-router,如何使用$stateProvider注

发布时间：2020-12-17 08:34:00 所属栏目：安全来源：网络整理

导读：我正在尝试注入一个面板进行编辑,具体取决于观看者是否是所有者.现在,我只是将面板/局部视图注入到html中时遇到了麻烦.我希望我的composition / views / view.html成为’基

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

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

> View Names – Relative vs. Absolute Names

小引用：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!