Service Portal Header script is not run on page redirect

[brendanhamman]

Hi All,

I have a usecase where I need my header widget to display different content based on the current displayed portal page. The code is below, and it works correctly. However, I am seeing a problem on redirection within the portal.

It seems that service portal does not refresh the header widget when redirecting within the same portal, and as such the data.page stored value is wiped, but the client script to evaluate that variable is not rerun.

Html: 

<div ng-if="data.page == 'something'">
   shows something
</div>
<div ng-if="data.page == 'something_else'">
   shows something else
</div>

Client Script:

c.data.page = $location.search().id;

I guess the question is "does this script NEED to be part of the header?" - I think so? I would prefer not to add an empty widget on each page just to run my script and dump it to $rootScope - but if no one can come up with a way to get around the header not refreshing, I will have to try that instead.

Answered: 

I fixed it. I played with the following, and it sees the location change, but the data binding to my html ng-show / ng-if would not refresh, and Servicenow would not let me $apply() on the header scope. 

$rootScope.$on('$locationChangeSuccess', function(event) {
 $scope.check_page();
//it runs the function, and updates the variables, but it didn't refresh the html binding
});

What I ended up doing was using ng-class, and toggling my hide / show with my own css class instead. Hope this saves someone a couple hours.

ANSWER:

<div ng-class="{ hide: check_page() }">

.hide {
	display:none;
}

$scope.check_page = function () {
	$scope.page = $location.search().id;
	if ($scope.page == 'page_name'){
		return false;
	} else {
		return true;
	}
};

[brendanhamman]

I added 

<a ng-href="?id={{something}}" onclick="window.location.reload()">

but it gives me a "loading" wheel on each redirect now, as if i landed on the portal the first time. Yikes. 

I think adding the empty widget to each of my pages may be the way to go unless someone else has a solution.

[brendanhamman]

I fixed it. I played with the following, and it sees the location change, but the data binding to my html ng-show / ng-if would not refresh, and Servicenow would not let me $apply() on the header scope. 

$rootScope.$on('$locationChangeSuccess', function(event) {
 $scope.check_page();
//it runs the function, and updates the variables, but it didn't refresh the html binding
});

What I ended up doing was using ng-class, and toggling my hide / show with my own css class instead. Hope this saves someone a couple hours.

ANSWER:

<div ng-class="{ hide: check_page() }">

.hide {
	display:none;
}

$scope.check_page = function () {
	$scope.page = $location.search().id;
	if ($scope.page == 'page_name'){
		return false;
	} else {
		return true;
	}
};

[Community Alums]

Thanks.. I was facing same issue of header not refereshing. But your solution helped me.