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', ['ui.router']);
 *
 * app.controller('ctrl', function ($scope, $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, $stateParams, { 
 *   reload: true, inherit: false, 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。