重新加載控制器後退按鈕angular-ui-router

如何在用戶點擊後退按鈕時重新加載控制器？重新加載控制器後退按鈕angular-ui-router

我使用AngularJS V1.6.2和角度的UI路由器0.4.2

的狀態：

... 
    .state('cars.bmw', { 
     cache: false, 
     url: '/bmw', 
     templateUrl: 'pages/cars/bmw.html?v=' + version 
    }) 
    .state('cars.audi', { 
     cache: false, 
     url: '/audi', 
     templateUrl: 'pages/cars/audi.html?v=' + version 
    }) 
    ...

檢查位置路徑，我注入{{}}標題和標題：

... 
if($location.path() === '/cars/bmw') 
{ 
    $scope.pageHeader = "BMW Cars"; 
    $scope.curentMenu = "CARS"; 
    $scope.title = My Car Collection BMW"; 
} 
...

菜單鏈接：

... 
<a ui-sref="cars.bmw" ui-sref-opts="{reload: true}">BMW</a> 
...

問題是例如如果我在/cars/BMW路徑並單擊後退按鈕到/cars/audi，標題，標題和curentMenu不會更改，我必須手動刷新頁面以重新加載控制器。

來源

2017-03-06 calin24

思考一個更好的方法是解決你試圖推斷使用$ location – cYrixmorten

下面的代碼將解決你的控制器在每個狀態的變化。試一試。

.state('cars.bmw', { 
     cache: false, 
     url: '/bmw', 
     templateUrl: 'pages/cars/bmw.html?v=' + version 
     controller: 'YourController' 
    })

此外，如果你可以發佈一些HTML也會有幫助。

來源

2017-03-06 16:30:00 mbeso

不能正常工作的狀態。我不確定它是否最適合檢查路徑。每個類別都有自己的控制器（例如汽車，電視，筆記本電腦）：汽車的控制器是：'app.controller（'cars'，function（$ scope，$ location）{if（$ location.path（）= == '/汽車/寶馬'）{ $ = scope.pageHeader 「寶馬汽車」; $ scope.curentMenu = 「CARS」; $ scope.title =我的汽車收藏BMW「; } ...} ' 等等，對於汽車類別中的每個路徑 – calin24

這是不好的，你用這些'if'語句做什麼，最好是在每個狀態下使用'state params'甚至'resolve'。請顯示您是如何使用我的解決方案的。一旦您將控制器添加到狀態配置中，它應該從html中刪除。 – mbeso

您應該聽取事件以進行成功的頁面更改$ locationChangeSuccess。

當該事件觸發時，您可以將您在pageload上運行的任何邏輯放在控制器初始化時需要運行的地方。

代碼

$rootScope.$on('$locationChangeSuccess', function() { 
    $scope.initFunction() 
});

來源

2017-03-06 16:32:29 Gaurav

使用

Scope.$on('$locationChangeSuccess', function() { $scope.initFunction() });

似乎工作。我創建在app.js每個catogory一個功能和用於標題，curentMenu和pageheader設置值：

var initHeader_Cars = function($scope, $location){ 
    if($location.path() === '/cars/bmw') 
    { 
     $scope.pageHeader = "BMW Cars"; 
     $scope.curentMenu = "CARS"; 
     $scope.title = "My Car Collection BMW"; 
    } 
    if($location.path() === '/cars/audi') 
    { 
     $scope.pageHeader = "AUDI Cars"; 
     $scope.curentMenu = "CARS"; 
     $scope.title = "My Car Collection AUDI"; 
    } 
}; 

var initHeader_Laptops = function($scope, $location){ 
    if($location.path() === '/laptops/acer') 
    { 
     $scope.pageHeader = "ACER"; 
     $scope.curentMenu = "Laptops"; 
     $scope.title = "Acer Models"; 
    } 
};

，然後我在每個類別控制器使用的locationChangeSuccess事件：

app.controller('cars', function($scope, $location) { 
    // init vaules 
    initHeader_cars($scope, $location); 
    $scope.$on('$locationChangeSuccess', function() { 
     // when click the back button 
     initHeader_cars($scope,$location); 
    }); 
});

來源

2017-03-06 18:31:03 calin24

重新加載控制器後退按鈕angular-ui-router

回答

相關問題