重新加载控制器后退按钮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

回答

相关问题