Question

假设您的网站有3条不同的路线，/news，/about和/signup。

新闻和关于他们自己的＆＃34;页面＆＃34;，而注册只是可以在/news或/about切换的叠加层。

如果您访问/signup或/news上的/about，则相应的页面仍会显示在注册叠加层下方。如果您直接转到/signup，它会在下方显示网站的根目录（/news，以便清晰起见）。

这可能吗？是否有可能使用AngularJS和ui-router（或angular-router？），有多个视图和各种路径可以改变一个视图而另一个视图保持不变。

我已经看过这个链接：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>

我想通过网址激活overlay视图，而不更改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（注册状态），如果用户未登录，则显示叠加层否则就去新闻报道了。

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

您可以使用state resolve来检查用户是否已登录，然后隐藏/显示它。

仅使用ui-router和AngularJS更改一个视图

1 个答案: