Question

我想到的布局涉及两个部分，每个部分占据页面的一半。

左半部分最初会有一个表单来过滤查询，返回的JSON将用于在Google地图上创建标记，然后填充左半部分。

右半部分最初会有文本指示给用户。单击左半部分的标记后，右半部分将被另一个JSON中与该标记关联的详细信息替换。

我对使用Angular非常缺乏经验，所以我可能会有一些误解。我遇到了这个问题：左侧需要URL中的查询，右侧需要URL中的标记ID。我不清楚如何实现这种布局，所以我不知道URL结构是什么样的。

www.website.com/mapview/ID/query似乎不符合逻辑;这将是最后的手段，我不知道它可能带来什么影响。我还考虑过POST过滤器选项，但这不允许用户为他们的搜索添加书签，并且表单重新提交警告对用户来说是非常意外的。

如果可以构建，那么最简洁的解决方案是什么？

Answer 1

可能你需要两条不同的路线。

使用Ui.Router：

请记住，每个子路由都可以从其父级继承视图，解析，参数，ecc。

angular
  .module('test', ['ui.router'])
  .config(function($stateProvider) {
    
    var index = {
      name: 'mapview',
      url: '/mapview/:query/',
      abstract: true,
      views: {
        "left": {},
        "right": {}
      }
    };
    
    var one = {
      name: 'mapview.marker',
      url: ':markerId/',
      views: {
        "left@": {},
        "right@": {}
      }
    };
    var two = {
      name: 'mapview.nomarker',
      url: '',
      views: {
        "left@": {},
        "right@": {}
      }};

  
    $stateProvider.state(index).state(one).state(two);
  })

AngularJS - 具有GET请求的多个控制器，如何处理URL？

1 个答案: