发表于: 2017-07-04 23:30:03

1 878


今天完成的事情:

    完成公司详情界面,组内分配的界面已经全部完成,明天开始整理界面,查看有没有bug

  

明天计划的事情:

    整理完成的界面,查看有没有小问题

    

遇到的问题:

      ui-router 多视图嵌套。 

在定义views属性时,如果视图名称中包含@,那么视图名称就是绝对命名的方式,否则就是相对命名的方式。相对命名的意思是相对于父模板中的ui-view,而绝对命名则指定了相对于哪个状态的模板。

在 ui-router 内部,views属性中的每个视图都被按照viewname@statename的方式分配为绝对名称,viewname是目标模板中的ui-view对应的名称,statename是状态的名称,状态名称对应于一个目标模板。@前面部分为空表示未命名的ui-view,@后面为空则表示相对于根模板,通常是 index.html。

<body ng-app>
<div ui-view></div> <!-- contacts.html plugs in here -->
<div ui-view="status"></div>
</body>
<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>
<div ui-view="detail"></div>
<!-- contacts.detail.html -->
<h1>Contacts Details</h1>
<div ui-view="info"></div>
$stateProvider.state('contacts', {
// 根状态,对应的父模板则是index.html
       // 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中
       templateUrl: 'contacts.html'
   })
 .state('contacts.detail', {
       views: {
           // 嵌套状态,对应的父模板是 contacts.html
           // 相对命名
           // contacts.html 中 <div ui-view='detail'/> 将对应下面
           "detail" : { },
           // 相对命名
           // 对应 contacts.html 中的未命名 ui-view <div ui-view/>
           "" : { },
           // 绝对命名
           // 对应 contacts.detail.html 中 <div ui-view='info'/>
           "info@contacts.detail" : { }
           // 绝对命名
           // 对应 contacts.html 中 <div ui-view='detail'/>
           "detail@contacts" : { }
           // 绝对命名
           // 对应 contacts.html 中的未命名 ui-view <div ui-view/>
           "@contacts" : { }
           // 绝对命名
           // 对应 index.html 中 <div ui-view='status'/>
           "status@" : { }
            // 绝对命名
           // 对应 index.html 中 <div ui-view/>
           "@" : { }
});

   

 

  

收获: ui-router子路由嵌套。



返回列表 返回列表
评论

    分享到