发表于: 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版本正常

收获:

如上


返回列表 返回列表
评论

    分享到