angular的ui-serf-active的用法

1.angular的强大的第三方库angular-ui-route,再里面的指令ui-serf-active可以很好的解决导航的选中状态的切换,

这个指令是监听路由发生变化时状态的切换;

现象:tab栏显示不同的内容,选中的导航特殊的状态;

代码解释:

使用ui-view来显示指定的内容;

<div>
    <nav ui-sref={i.link} ui-serf-active="active" ng-class='{"active":i.link==now.link}' ng-repeat="i in navs">{{i.txt}}</nav>
</div>
<ui-view name="content"></ui-view>
View Code

 js部分的代码

$scope.navs= [{txt:"新闻",link:"tab.news",active:true},{txt:"nba",link:"tab.nba",active:false}]

$scope.now = $scope.navs[0];//默认最初的选择,默认显示第一个

这样在切换nav时,点击的永远有active类的样式

注:这里只是写的精简的代码,控制器与主模块的关系的连接实属前期功课,这里就不在做了。

 

posted @ 2017-04-13 21:58  苏氏之道  阅读(1189)  评论(0编辑  收藏  举报