small medium large xlarge

Generic-user-small
01 Jan 2017, 12:16
Mohammad Esmaeili (4 posts)

Hi David,

Happy New Year.

in Ch. 7 (1st edition, Single Page App with Angular’s Router) when we show the details of a Customer, how we should go back to the Customer search page and show the search results again. currently with native Back button all data is lost.

thanks!

Dmfcb_pragsmall
01 Jan 2017, 21:38
David Copeland (368 posts)

To make the search page “remember” the term, you’ll first need to change that page to fetch a search term from the query string, so if you go to something like localhost:8000/customers?keywords=Pat it will search for Pat.

With that in place, you can dynamically change the URL on that page so that the back button works.

You can also implement a custom button on the details page that, when clicked, uses the router to navigate back to the search page and uses the search term from before.

Sorry this is a bit vague, but hopefully points you in the right direction.

Generic-user-small
02 Jan 2017, 16:26
Mohammad Esmaeili (4 posts)

Hi David,

I tried to implement your 2nd suggestion ( adding a button and …):

in the DetailController view, I put a button and call the following function:

…. ng-click=”reloadSearch()” Back to Search Results …

2) in the DetailController, I add the function which broadcast an event to the main Controller (CustomerController):

$scope.reloadSearch = function(){

$rootScope.$broadcast(‘rerunSearch’);

$location.path(“/”);

}

3) in the CustomerController, I recall the search function with keywords:

$rootScope.$on(‘rerunSearch’, function(){

$scope.search($scope.keywords);

}

Observation:

the search function is recalled and a new query is sent to the backend with correct search term. and http function received the new data.

however the view is not updated ( it’s blank).

I have seen a lot of complains online mentioning this problem. one proposed solution is to call $scope.$apply() which did not work in this case.

Please advise how to proceed.

thanks !

Dmfcb_pragsmall
02 Jan 2017, 17:10
David Copeland (368 posts)

It’s hard to comment without seeing the full code. Usually, using $rootScope is not ideal—is there another way to pass the data around?

One idea is, when you navigate to the detail controller, include the URL for “back” as a query string, e.g. /customers/1234?backUrl=%2Fcustomers%3Fkeywords%3DPat

Then, your detail controllers back button can just route the user to whatever backUrl was.

You must be logged in to comment