Angularjs - Change URL without update current controller and template

Question

i'm developing a front-end like pinterest, when the pin is clicked this should be loading in a modal, no problem here.

but a requirement is that, the URL should change when the modal is loaded and in the background must keep pins list.

I can't do it, tried using angular-ui, but when the URL change the ui-view elements are cleaned too

Here in stackoverflow are many similar questions, but the problem here is that not children URLs

url1: site.com / list / categorie -> url2: site.com / title

How I can change the URL and keep the current contents in the background?

thanks!

Answer 1

After few days i got it, this code must be in the controller

var lastRoute = $route.current;
    $scope.$on('$locationChangeSuccess', function(event) {
        if($route.current.$$route.controller == 'modal'){
            $route.current = lastRoute;
        }
    });

this will keep the current ngview HTML, but change the url

I found the solution here https://stackoverflow.com/a/12429133/1179213

Answer 2

You can most likely use HTML history's API. Check out this post. Updating address bar with new URL without hash or reloading the page

Since you are doing this outside of Angular, it should not affect anything but the URL.

Hope that works!

Answer 3

You can use a query parameter to highlight the correct image using $location.search and $watch-ers.