バックボタン角度ui-routerのリロードコントローラ

Question

ユーザが戻るボタンをクリックしたときにコントローラをリロードするにはどうすればいいですか？

私は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は変更されません。ページを手動で更新してコントローラをリロードする必要があります。

Answer 1

以下のコードは、各状態の変更時にコントローラを解決します。試してみます。

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

また、HTMLを投稿することもできます。

Answer 2

ページの変更が成功するためには、$ locationChangeSuccessイベントを待機する必要があります。

このイベントが発生すると、コントローラの初期化時に実行する必要があるpageloadで実行するロジックを配置できます。

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

を使用して

コード

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

Answer 3

が動作しているようです。私は、各catogoryためapp.jsで関数を作成し、タイトルの値を設定し、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); 
    }); 
});