I'm using AngularJS + the "modal" directive provided by UI Bootstrap. The modal dialog box works great, but I have one problem: the URL isn't changing.
For example, my AngularJS app has a route set up for "/people", which displays a list of people. When the user clicks on a person, a modal dialog box comes up and shows detailed info. I am trying to figure out how to modify the URL without actually causing the $routeProvider to re-execute the controller.
For example, I could have something like this in my routes:
$routeProvider.
when('/people', {controller: PeopleCtrl, templateUrl: 'templates/people.html'}).
when('/people/:personId', {controller: PeopleCtrl, templateUrl: 'templates/people.html'}).
Then in my PeopleCtrl I can do:
if ($routeParams.personId) {
$scope.editPerson({id: $routeParams.personId});
}
Which basically calls the same function that I bind with ng-click on the rows of people. This works in terms of allowing my app to respond to a URL like /people/123, but I can't figure out how to get the URL to jump from /people to /people/123 and then back to /people as the modal dialog box opens and closes.
Obviously, I can just call $location.path("/people") but the issue with that is that PeopleCtrl gets re-exceuted and I want to avoid that since the state "behind" the modal should be preserved.
In other words: I'm looking for a way to change the URL/location without the normal $routeProvider changes getting detected.
Thanks!
Found another SO post which did exactly what I was looking for:
function MyCtrl($route, $scope) {
var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function(event) {
$route.current = lastRoute;
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With