【发布时间】:2016-07-19 14:05:29
【问题描述】:
我遇到了 AngularJS 和 URLS 的问题。当我在浏览器中按下后退/前进按钮时,我希望我的模型相应地更新。从这个页面可以看出: http://www.networkwestmidlands.com/whats-on/#params?when=Today&what=Events&where=birmingham
它从 url 中提取变量(一个 getter 函数,如果可用,我将其设置为 x 模型的默认值)并将它们设置为每个搜索过滤器的模型。如果您开始更新过滤器,URL 也会更新(这会在 ng-change 上调用一个函数),刷新或共享 url 将加载页面,其中包含从 url 预定义的所有模型。
我遇到的问题是视图/控制器在按下后退/前进按钮时没有更新/刷新。
我如何在控制器中的页面加载中定义模型的示例:
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
}
}
}
【问题讨论】:
-
问题是,当您更改
$location.url()时,您并没有导航到它!您只是在运行一些任意角度代码。这意味着您不会在浏览器历史上留下任何东西!你真正需要做的是强制页面重新加载!所以它被存储在历史记录中 -
你应该考虑使用某种形式的路由,比如 ui.router
标签: javascript angularjs angularjs-scope url-routing angularjs-routing