栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

角度ui-bootstrap选项卡不呈现ui-view

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

角度ui-bootstrap选项卡不呈现ui-view

是的,您可以在标签内呈现ui视图。诀窍是使用

ui-sref
<tab-heading>
控制状态/路由变化,并具有
ui-view
以下
</tabset>
。我敢肯定还有其他方法,但这就是我如何使用ui-router制作选项卡的方法。

编辑更新

以上原始建议是错误的,

ui-sref
应在
<tab>

对chris-t的帽子提示,以进行正确的配置。

使用多个视图演示http://plnkr.co/edit/gXnFS3?p=preview

index.html

<tabset>  <tab ui-sref="left">    <tab-heading >      <a ui-sref-active="active">Left</a>    </tab-heading>  </tab>  <tab ui-sref="right">    <tab-heading >      <a ui-sref-active="active">Right</a>    </tab-heading>  </tab></tabset><div >  <br>  <div >    <div  ui-view="viewA">      <!--Here is the A content-->    </div>  </div>  <div >    <div  ui-view="viewB">      <!--Here is the B content-->    </div>  </div></div>

app.js(UI路由器配置)

$stateProvider.state('left', {  url: "/",  views: {    "viewA": {      template: "Left Tab, index.viewA"    },    "viewB": {      template: 'Left Tab, index.viewB<br><a ui-sref=".list">Show List</a>' +     '<div ui-view="viewB.list"></div>'    },    "viewC": {      template: 'Left Tab, index.viewC <div ui-view="viewC.list"></div>'    }  }}).state('left.list', {  url: 'list',  views: {    "viewB.list": {      template: '<h2>Nest list viewB</h2><ul>' +     '<li ng-repeat="thing in tab1things">{{thing}}</li></ul>',      controller: 'Tab1ViewBCtrl',      data: {}    },    "viewC.list": {      template: 'Left Tab, list.viewC'    }  }})


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/649522.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号