当$ location.search更新GET参数时,避免ng-view被"擦除"(更新)

Question

所以我有一个使用传单库实例化的地图对象.地图实例在单独的模板中创建,并以这种方式路由: -

var app = angular.module('myApp', ['ui', 'ngResource']);

app.config(function ($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'views/map.html',
        controller: 'MapCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });

});

当我想要处理"搜索/过滤"并在搜索我希望在地图实例上加载的对象时控制GET参数时,问题就开始了.

这是我实现的一个简单的过滤函数,它根据用户点击的选定值(在下拉列表中)触发.

$scope.setFilter = function (fname, fvalue) {
    console.log("Setting " + fname + " to " + fvalue);
    var search_string = $location.search();
    search_string[fname] = fvalue;
    $location.search(search_string);
};

浏览器地址栏的url会按照我的预期更新,但原始(传单)地图对象会"更新"并从视图中消失.这不是我想要的.

如何防止这种情况发生或控制此过程,以便仍可以看到地图？

Answer 1

这是因为更新URL params会再次触发路由,这会导致重新加载控制器.有一个简单的解决方案.使用该属性reloadOnSearch并将其设置为false.$ location.search()更改时,这不会重新加载控制器

$routeProvider
    .when('/', {
         templateUrl: 'views/map.html',
         controller: 'MapCtrl',
         reloadOnSearch: false
    })
    .otherwise({
         redirectTo: '/',
         controller: 'MapCtrl',
         reloadOnSearch: false
    });

});