angularjs - urlrouterprovider - ui-router教學




重新加載當前狀態-刷新數據 (12)

我正在使用Angular UI路由器,並希望重新加載當前狀態並刷新所有數據/重新運行當前狀態的控制器及其父項。

我有3個州級別: directory.organisations.details

directory.organisations包含一個包含組織列表的表。 單擊表中的項目將加載directory.organisations.details,其中$ StateParams傳遞項目的ID。 因此,在細節狀態中,我加載了這個項目的細節,編輯它們然後保存數據。 迄今為止都很好。

現在我需要重新加載這個狀態並刷新所有的數據。

我努力了:

 $state.transitionTo('directory.organisations');

哪些轉到父狀態,但不重新加載控制器,我猜是因為路徑沒有改變。 理想情況下,我只想保持在directory.organisations.details狀態並刷新父項中的所有數據。

我也試過:

$state.reload()

我在API WIKI上為$ state.reload“看到了這一點”(控制器現在重新實現的bug,很快就會修復)“。

任何幫助,將不勝感激?




你可以使用@Rohan回答https://.com/a/23609343/3297761

但是如果你想讓每個控制器在視圖更改後實時加載,你可以使用

myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }

可能更清潔的方法如下:

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

我們只能從HTML重新加載狀態。


如果您使用的是離子v1,上述解決方案將不起作用,因為離子已啟用模板緩存作為$ ionicConfigProvider的一部分。

解決這個問題有點棘手 - 您必須在ionic.angular.js文件中將緩存設置為0:

$ionicConfigProvider.views.maxCache(0);

對於角度v1.2.26,以上都不適用。 調用上述方法的ng-click將不得不被點擊兩次以使狀態重新加載。

所以我最終使用$ timeout模擬了2次點擊。

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
            $delegate.forceReload = function () {
                var reload = function () {
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), {
                        reload: true,
                        inherit: true,
                        notify: true
                    })
                };
                reload();
                $timeout(reload, 100);
            };
            return $delegate;
        }]);

我有多個嵌套視圖,目標是只重載一個內容。 我嘗試了不同的方法,但唯一對我有用的是:

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', {
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: {reload: false} //add reload param to a view you want to reload
  });

在這種情況下,只需要視圖將被重新加載並且緩存仍然可以工作。


我有這個問題,它破壞了我的頭,我的路由從JSON文件讀取,然後饋入一個指令。 我可以點擊一個UI狀態,但我無法重新加載頁面。 所以我的同事向我展示了一個很好的小竅門。

  1. 獲取你的數據
  2. 在您的應用程序配置中創建加載狀態
  3. 將你想要去的狀態保存在rootcope中。
  4. 在你的app.run中將你的位置設置為“/ loading”
  5. 在加載控制器中解析路由承諾,然後將該位置設置為您的預期目標。

這對我有效。

希望能幫助到你


我知道有很多答案,但是我發現在不導致完整頁面刷新的情況下完成此操作的最佳方式是在要刷新的路由上創建一個虛擬參數,然後當我調用我傳入的路由時隨機數給虛擬參數。

            .state("coverage.check.response", {
                params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
                views: {
                    "coverageResponse": {
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    }
                }
            })

然後調用該路線

$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });

像魅力一樣工作並處理解決方案。


此解決方案在AngularJS V.1.2.2中可用:

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});

那將是最終的解決方案。 (來自@ Hollan_Risley的帖子)

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});

現在,只要您需要重新加載,只需致電:

$state.forceReload();

$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };




angular-ui-router