AngularJS中使用ui-router重新加载当前路由页面

想象这样一个场景，我们通过菜单导航进入一个操作页面，当在页面中已经录入或选择了一些信息，发现根本不是想要的，希望能够使页面快速恢复的初始状态，这时候一个比较理想的选择是再次点击下菜单栏里的对应项。

如果你的菜单是使用这种方式，那么点击当前的菜单，页面将不会有任何反应

<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。

使用0.2.x版本的建议可以直接升级到0.2.18。

AngularJS中使用ui-router重新加载当前路由页面

相关文章