Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

How to reload the controller when the user click the back button???

I am using AngularJS v1.6.2 and angular-ui-router 0.4.2

The states:

   ...
   .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
    })
   ...

Check the location path and I'm injecting {{}} the header and the title:

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

the menu links:

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

The problem is for example if I am in /cars/BMW path and click the back button to /cars/audi, the title, header and curentMenu don't change, I have to manually refresh the page to reload the controller.

share|improve this question
    
Think a better approach would be to resolve the state you attempt to infer using $location – cYrixmorten 2 days ago
up vote 0 down vote

The code below will resolve your controller on each state change. Give it a shot.

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

Also, if you could post some HTML would help too.

share|improve this answer
    
Not working. I am not sure if its the best what i am doing checking the path. Each category has its own controller (ex: Cars, TV, Laptops): The controller for the cars is: app.controller('cars', function($scope, $location) { if($location.path() === '/cars/bmw') { $scope.pageHeader = "BMW Cars"; $scope.curentMenu = "CARS"; $scope.title = My Car Collection BMW"; }...} and so on for each path in the cars category. – Călin Bobeș 2 days ago
    
it is not good what are you doing with those if statements. it is better if you use state params or even resolve for each state. can you please show how did you used my solution. once you add controller into state config it should be removed from html. – mbeso 2 days ago
up vote 0 down vote

You should listen to the event for succesful page changes, $locationChangeSuccess.

When that event fires you could put whatever logic you run on pageload that you need to run when the controller initializes.

Code

$rootScope.$on('$locationChangeSuccess', function() {
    $scope.initFunction()
});
share|improve this answer
up vote 0 down vote

Using

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

seems to work. I created a function in the app.js for each catogory and set the values for the title, curentMenu and 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";
  }
};

and then i used in each category controller the locationChangeSuccess event:

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);
  });
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.