如何使用具有并行状态的多个视图使用Angular.js打开extenal表单模式

时间:2016-02-29 18:05:24

标签: angularjs ngroute

我正在开发一个单页应用程序,我目前正在使用该网站的导航栏。我想在导航栏中放入一个下拉菜单,如果用户当前没有连接,可以让用户连接/注册到网站,如果他已登录则注销/更改设置。

网站使用ngRoute加载主页面内容,因此页面已经有 ng-view (我读过你每页只能有一个)。

当用户点击下拉菜单中的“登录”链接时,我想打开一个带登录表单的模式(当用户点击“注册”时,我会打开带有注册表单的模式)。

我知道如何向页面添加模态,但我想在第一次打开模态时从外部模板文件加载它(就像主内容视图一样)。

该网站可能有多个模态,我不想在每次生成页面时都放置很多隐藏模态。

你可能已经注意到了,我是Angular.js的新手,所以我想知道这个库是否为我提供了一个简单的方法。

以更简单的方式解释我想要做的事情:

  • 我想要一个 /template/loginForm.html 文件,其中包含模态中的登录表单
  • 我想在下拉菜单中有一个链接,只有在以前从未加载文件时才加载文件(就像ngRoute一样)
  • 每次点击链接时,都会打开模态(URL不会更改)

我会通过添加指示已加载哪些模态的变量来解决这个问题(新模态将附加到具有唯一ID的页面)但我不确定这是一个很好的解决方案。

2 个答案:

答案 0 :(得分:0)

您可以使用AngularUI Router,您可以使用嵌套状态和视图。

所以你会有你的索引页

<!-- index.html -->
<body>
    <div ui-view></div>
    <a ui-sref="main">Main Page</a>
    <a ui-sref="other">Other Page</a>
</body>

然后

<!-- partials/main.html -->
<h1>main page</h1>
<hr/>
<a ui-sref="main.login">Login</a>
<a ui-sref="main.register">Register</a>
<div ui-view></div>

定义您的登录和注册页面

<!-- partials/main.login.html -->
<h3>Login Page</h3>

<!-- partials/main.register.html -->
<h3>Register Page</h3>

控制器将配置为,

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/main");
  //
  // Now set up the states
  $stateProvider
    .state('main', {
      url: "/main",
      templateUrl: "partials/main.html"
    })
    .state('main.login', {
      url: "/login",
      templateUrl: "partials/main.login.html",
      controller: function($scope) {
      }
    })    
    .state('main.register', {
      url: "/register",
      templateUrl: "partials/main.register.html",
      controller: function($scope) {
      }
    });
});

它非常类似于ngRoute和简单。详细说明见github page

答案 1 :(得分:0)

我设法通过在同一页面中使用多个单独的视图来解决问题(这是我的目标)。我无法使用库 ngRoute 这样做,所以我将 ui-router 添加到我的项目中。

据我所知, ui-router 不支持在具有并行状态的同一页面中的多个单独(无父子关系)视图(它确实支持命名视图,但你不能如果我没有弄错的话,只需一次更新一个,而不清除其他人。)

最后,我通过导入 ui-router-extras 解决了这个问题,为 ui-router 添加了许多有用的功能。你可以看到一个很好的模态示例here(这是我试图完成的)。