想象这样一个场景,我们通过菜单导航进入一个操作页面,当在页面中已经录入或选择了一些信息,发现根本不是想要的,希望能够使页面快速恢复的初始状态,这时候一个比较理想的选择是再次点击下菜单栏里的对应项。
如果你的菜单是使用这种方式,那么点击当前的菜单,页面将不会有任何反应
<li ng-repeat="m in menus" ui-sref-active="li_active"> <a href="#" ui-sref="{{m.state}}"> <span ng-bind="m.name"></span> </a> </li>
去查找资料,有很多信息提示我们使用ui-sref-opts指令来设置reload参数,将代码改成这样,测试下会发现当前页面确实是刷新了,但是整个页面也同时都刷新了
<li ng-repeat="m in menus" ui-sref-active="li_active"> <a href="#" ui-sref="{{m.state}}" ui-sref-opts="{reload:true}"> <i ng-class="message.image"></i> <span ng-bind="message.menuCName"></span> </a> </li>
其实,reload参数不光可以传递一个布尔型参数,还可以接受string和object型参数,如果只是想刷新当前的路由页面,而不去连带刷新父路由,我们可以把reload的参数值设置为当前路由对应的字符串,代码是这样:
<li ng-repeat="m in menus" ui-sref-active="li_active"> <a href="#" ui-sref="{{m.state}}" ui-sref-opts="{reload:'{{m.state}}'}"> <i ng-class="message.image"></i> <span ng-bind="message.menuCName"></span> </a> </li>
当然, 上面说的场景只是一种情况,我们在程序的控制逻辑中也会用到刷新页面的情况,方法类似,一种可以通过$state.go的方式跳转路由,同样可以使用这个参数来处理;另外一种可以直接使用$state.reload,直接调用$state.reload()是加载整个页面,$state.reload('currentState')则是加载当前路由,这些在源码的注释中都有清晰的说明
/** * @ngdoc function * @name ui.router.state.$state#reload * @methodOf ui.router.state.$state * * @description * A method that force reloads the current state. All resolves are re-resolved,* controllers reinstantiated,and events re-fired. * * @example * <pre> * var app angular.module('app',['ui.router']); * * app.controller('ctrl',function ($scope,$state) { * $scope.reload = function(){ * $state.reload(); * } * }); * </pre> * * `reload()` is just an alias for: * <pre> * $state.transitionTo($state.current,$stateParams,{ * reload: true,inherit: false,notify: true * }); * </pre> * * @param {string=|object=} state - A state name or a state object,which is the root of the resolves to be re-resolved. * @example * <pre> * //assuming app application consists of 3 states: 'contacts','contacts.detail','contacts.detail.item' * //and current state is 'contacts.detail.item' * var app angular.module('app',$state) { * $scope.reload = function(){ * //will reload 'contact.detail' and 'contact.detail.item' states * $state.reload('contact.detail'); * } * }); * </pre> * * `reload()` is just an alias for: * <pre> * $state.transitionTo($state.current,notify: true * }); * </pre> * @returns {promise} A promise representing the state of the new transition. See * {@link ui.router.state.$state#methods_go $state.go}. */
另外,需要重点说明下,你使用的ui-router版本需要是0.2.14以上的,否则这样写仍然会刷新整个页面,貌似是之前版本的bug。