AngularJS后退/前进按钮更新模型/范围

I'm having an issue with AngularJS and URLS. When I press the back/forward buttons in the browser I want my models to update accordingly. As you can see from this page: http://www.networkwestmidlands.com/whats-on/#params?when=Today&what=Events&where=birmingham

我遇到了AngularJS和URLS的问题。当我按下浏览器中的后退/前进按钮时,我希望我的模型能够相应地更新。正如您在此页面上看到的:http://www.networkwestmidlands.com/whats-on/#params?when = Today &what = Eventswherewhere = Birmingham

It pulls the variables from the url(a getter function that I set as my default value for x model if available) and sets them to the model for each search filter. If you start updating the filters the URL will also update(this calls a function on ng-change), and refreshing or sharing the url will load the page with all the models predefined from the url.

它从url(我设置为x模型的默认值的getter函数,如果可用)中提取变量,并将它们设置为每个搜索过滤器的模型。如果您开始更新过滤器,URL也会更新(这会调用ng-change上的函数),刷新或共享URL将加载包含从URL定义的所有模型的页面。

The trouble i'm having is that the view/controller doesn't update/refresh when pressing the back/forward buttons.

我遇到的麻烦是按下后退/前进按钮时视图/控制器不会更新/刷新。

An example of how I define my model on page load in my controller:

我在控制器中如何在页面加载上定义模型的示例:

vm.type = getFromURL('what=') || 'Events';

function getFromURL(filterName){
            var url = $location.url();
            // if there is already a hash in the url
            if(url && url.indexOf('params?') >= 0){
                // If the search param already exists
                if(url.indexOf(filterName) >= 0){
                    // Split url at already existing search param
                    var searchParams = url.split(filterName)[1];
                    // if there is still an '&' in the url do something
                    if(searchParams.indexOf('&') >= 0){
                        // split at the '&' and get rid of anything after it(other search params)
                        var singledParam = searchParams.split('&')[0];
                        return singledParam;
                    }else{
                        return searchParams;
                    }
                // If the suggested search param doesn't exist
                }
            }
        }

1 个解决方案

#1

I ended up using: $location.url(url).replace(); which worked as required.

我最终使用:$ location.url(url).replace();按要求工作。