angularjs使用bootstrap在modal中使用nav并且不让modal外的数据刷新

1.今天的一点小总结

今天写前端的时候碰到了要使用导航条的情况,而使用nav-bar感觉自己不好控制,而且放在modal上不好看.就使用nav来进行.
modal页面如下:

<div role="navigation" ng-init="other_hide=true">    <div class="modal-header" role="navigation">        <h4 class="modal-title">表</h4>        <ul class="nav nav-tabs">            //class="active"默认显示一个head            <li class="active">              //注意这里的onclick, 因为我这里的href只是转换下面的tab页,onclick不需要起作用,所以直接return false,这样可以防止modal外的页面被重置了.              //如果需要onclick功能,那么这么写 onclick="yourfunction(); return false"即可.                <a href="#detail_info" onclick="return false;" style="color: #0059b3" data-toggle="tab">详细信息</a>            </li>            <li>                <a href="#other_info" onclick="return false;" style="color: #0059b3" data-toggle="tab">配置</a>            </li>        </ul>    </div>    <div class="tab-content">        //注意这里的in active ,之前一直不知道怎么默认显示一个tab.还用上了ng-hide,白费力气,查了好半天才查到.         <div class="modal-body tab-pane fade in active" style="margin-top: 1px" id="detail_info">            一个tab        </div>        <div class="modal-body tab-pane fade " id="other_info">            另一个tab        </div>    </div>    <div class="modal-footer">        <button class="btn btn-success" type="button" ng-click="save()">保存</button>        <span style="margin-left: 20px"></span>        <button class="btn btn-default" type="button" ng-click="ok()">返回</button>    </div></div>

值得注意的两点在注释里面有.

• 注意a标签里面的onclick, 因为我这里的href只是转换下面的tab页,onclick不需要起作用,所以直接return false,这样可以防止modal外的页面被重置了.如果需要onclick功能,那么这么写 onclick=”yourfunction(); return false”即可.
• 注意in active ,之前一直不知道怎么默认显示一个tab.还用上了ng-hide,白费力气,查了好半天才查到.
  不需要任何的js代码就能够实现这样点击tab的效果.
  效果图如下: