发表于: 2017-02-12 04:07:49
3 1246
今天完成:
修改萝卜多bug:
footer关于我们联系我们跳转,对应条目高亮;
修改当前页面高亮判断条件,由path改为路由state;
明天计划:
完成修改
遇到的问题;
1:关于我们与联系我们:
在页面中将两个条目内容写入,由ng-if控制渲染。之前是给两个选项添加click,根据传入值控制显示的模块,footer中跳转至这里的话有点儿问题,当从其他页面跳转到这里时,从footer不能控制条目的切换(controller在进入这个页面时只载入一次,路由state不发生变化,页面不会重载);
解决:给footer内跳转标签添加属性ui-sref-opts=“{reload:true}”
<a ui-sref="about({tag:'about'})" ui-sref-opts="{reload: true}">关于我们</a>
设置ui-sref跳转至关于我们页面,并传入对应参数;通过ui-sref-opts的reload强制刷新路由,实现重载controller;
.state('about', {
url: '/about?tag',
templateUrl: 'about.html',
controller: 'AboutController',
controllerAs: 'vm'
})
根据传入的tag值判断高亮条目;
2:总体当前条目高亮方式:
原来的方式为:获取当前path:
子路由:根据当前path判断是否高亮;
父路由:通过正则过滤,判断是否为当前子页面,实现高亮控制;
很麻烦
修改:
.run(function($rootScope, $state, $stateParams, $window) {
$rootScope.$on('$stateChangeStart',function (event, toState, toParams, fromState, fromParams) {
$rootScope.currentState=$state;
})
})
在配置文件载入完成后添加路由change时间,每次路由地址发生变化时,将当前state赋给全局变量currentState,
ng-class="{'ac':currentState.includes('job')}
通过includes()或is()判断添加class:
$state.includes('a'):当前state是否为a或a的子路由,返回布尔值;
$state.is('test'):完全 匹配,当前state是否为test,返回布尔值;
配置一次即可;
ui-router 1.0版本添加$stateChangeStart事件无效果,降回0.4版本正常
收获:
如上
评论