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

Question

我正在开发单页应用程序，目前正在处理网站的导航栏。我想在导航栏中放置一个下拉菜单，让用户 connect/register 如果他当前未连接到该网站，如果他已经登录则允许 logout/change 设置。

该网站使用 ngRoute 加载主页内容，因此该页面已经有一个 ng-view（我读到每个页面只能有一个）。

我想在用户单击下拉菜单中的 link "Login" 时打开一个带有登录表单的模式（以及当用户单击 "Register").

我知道如何向页面添加模式，但我只想在第一次打开模式时从外部模板文件加载它（就像主要内容视图一样）。

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

您可能已经注意到，我是 Angular.js 的新手，所以我想知道该库是否为我提供了一种简单的方法来执行此操作。

以更简单的方式解释我正在尝试做的事情：

我想要一个 /template/loginForm.html 文件，其中包含模式
我希望在下拉菜单中有一个 link，仅当文件以前从未加载过时才加载文件（就像 ngRoute 所做的那样）
每次单击 link 时都会打开模式（URL 不会改变）

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

Answer 1

您可以在可能存在嵌套状态和视图的地方使用 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.

上给出

Answer 2

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

据我了解 ui-router 不支持在同一页面中具有并行状态的多个独立（无父子关系）视图（它确实支持命名视图，但如果我没记错的话，你不能一次只更新一个而不清除其他视图。

最后我通过导入 ui-router-extras that adds a lot of useful features to ui-router. You can see a nice modal example here 解决了这个问题（这正是我想要完成的）。

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

How to open an extenal form modal with Angular.js using multiple views with parallel states

angularjs

ngroute