Question

当用户单击后退按钮时如何重新加载控制器???

我正在使用AngularJS v1.6.2和angular-ui-router 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。

当该事件触发时，您可以在控制器初始化时运行您在页面加载上运行的任何逻辑。

代码

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

Answer 3

使用

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

似乎有效。我在app.js中为每个catogory创建了一个函数，并设置了title，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);
  });
});

在后退按钮angular-ui-router上重新加载控制器

3 个答案: