CODEWITHSUNDEEP
angularjsngroute
Digital Ninja
Digital Ninja

Reputation: 3731

Don't reload the ngView template when I change a parameter with $location.search()

I posted a question recently about how to set parameters in the URL with Angularjs so that they could be preserved on page reload. But it caused a problem with Google Maps.

I am using ngRoute to navigate around my application. And the problem that I've experienced with setting parameters in the URL, was that every time I would set a parameter (be it $location.search() or just a plain old window.location.hash='something'), the Google Maps map would get unloaded. I tried changing parameter names, because I thought Google Maps listens to some of those options by default. But that wasn't the case.

Once I got rid of the ngRoute code completely, and instead of the ngView directive, I included my pages with ng-include, the map didn't get unloaded anymore when I manipulated the parameters.

I'm not that good as to know exactly what or why is going on, but I would guess that ngRoute thinks it has to compile my template file again because "something" changed in the URL. So what I would like, is to explain to ngRoute somehow, that if the part after ? changed, then it shouldn't try to compile my template file again (and subsequently destroy the loaded Google Maps), because those are just my additional options. But if the part before ? changed, then that's fine, because then the page changed.

Or, is there another, better, more Angular-way of getting around this issue?

This is my ngRoute configuration:

app.config(function($httpProvider, $routeProvider) {
    // Routing
    $routeProvider.when("/", {
        redirectTo: "/Map"
    }).when("/Map", {
        controller: "MapController",
        templateUrl: "tpl/view/map.html"
    }).when("/Table", {
        controller: "TableController",
        templateUrl: "tpl/view/items-table.html"
    }).otherwise({
        templateUrl: "tpl/view/404.html"
    });
});

This is my code for changing pages:

$scope.navigate = function(location) {
    $location.path(location);
};

And this is how I would set up a custom GET parameter, as per the code from my other Stackoverflow question:

var params = $location.search();
params.source = source.filename;
$location.search(params);

Upvotes: 0

Views: 903

Answers (1)

Tom A
Tom A

Reputation: 964

You're looking for the reloadOnSearch property.

app.config(function($httpProvider, $routeProvider) {
  ...
  }).when("/Map", {
    controller: "MapController",
    templateUrl: "tpl/view/map.html",
    reloadOnSearch: false
  })
  ...
});

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Upvotes: 2

Related Questions