CODEWITHSUNDEEP
javascriptangularjs
Dave3of5
Dave3of5

Reputation: 730

AngularJs RouteName not updating

I have the following setup:

I have a header controller which controls the top navbar of the page. When entering a different route I want to change the nav layout. The problem I am having is that I can detect the route but only when the user refreshes the page.

Example:

<div data-ng-controller="HeaderController" >
...
<span>Product Name - {{layout}}</span>
...
</div>

My header controller: 

angular.module('myApp.system').controller('HeaderController', ['$scope', 'Global', '$location', '$route', function ($scope, Global, $location, $route) {
...

    $scope.layout = $location.path().includes('projectEditor');
...

}]);

When you select a button it opens a page with the route: projectEditor/1. But the span only updates when you refresh the page. My plan was to use a condition on the class but it only works when the user refreshes the page.

I'm using 1.5.5 version of angular.

How can I get that scope variable in my header controller to update on change of route anyone know ?

Upvotes: 3

Views: 25

Answers (2)

Dave3of5
Dave3of5

Reputation: 730

Ok I figured it out I needed to use $routeChangeStart and update a $routeScope variable and then attach to that.

Thanks all!

Upvotes: 0

Tony
Tony

Reputation: 482

In order to know when the location change, you should use events :

https://docs.angularjs.org/api/ngRoute/service/$route#events

The solution Depends on the implementation you are using to route your application. Here is an example with default angular router

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
    $scope.layout = 'newRoute';
}

I hope it may helps

Upvotes: 1

Related Questions