javascript - 仅使用 ui-router 和 AngularJS 更改一个 View

Question

假设您的网站有 3 个不同的路由，/news、/about 和 /signup。

新闻和关于是他们自己的“页面”，而注册只是一个覆盖层，可以在 /news 或 /about 上切换。

如果您在 /news 或 /about 上访问 /signup，相应的页面在注册叠加层下方仍然可见。如果您直接转到 /signup，它会在下方显示网站的根目录(为清楚起见，/news)。

这可能吗？是否有可能使用 AngularJS 和 ui-router(或 angular-router？)，拥有多个 View 和各种路由，这些 View 会更改一个 View ，同时保持另一个 View 不变。

我查看了这个链接:angularjs ui-router - how to build master state which is global across app

但似乎它所做的只是为 ui-view 定义一个默认值，以防当前路由中没有声明任何内容。

设置非常基本:

<div class="main" ui-view="main"></div>
<div class="overlay" ui-view="overlay"></div>

我想通过 url 激活 overlay View ，而不更改 main 中显示的内容。

Answer 1

你不是说登录而不是注册吗？是的，有可能。使用三种状态

$stateProvider.state("signup", {
    url: "/signup",
     views: {
                "overlay": {
                    templateUrl: "signup.html",
                    controller: "SignupController"
                },
                "main": {
                    templateUrl: "news.html",
                    controller: "NewsController"
                }
              }    
  })


  .state("news", {
         url: "/news",
         views: {
                "overlay": {
                    templateUrl: "signup.html",
                    controller: "SignupController"
                },
                "main": {
                    templateUrl: "news.html",
                    controller: "NewsController"
                }
              }    
  })

.state("news", {
         url: "/about",
         views: {
                "overlay": {
                    templateUrl: "signup.html",
                    controller: "SignupController"
                },
                "main": {
                    templateUrl: "about.html",
                    controller: "AboutController"
                }
              }    
  });

注册叠加模板将在所有三种状态下加载。如果注册 URL 已加载(注册状态)， 如果用户未登录，则显示叠加层 否则转到新闻状态。

如果用户直接转到新闻或关于 URL， 如果用户未登录，则显示叠加层 否则不显示覆盖

您可以使用状态解析来检查用户是否登录，然后隐藏/显示它。