我正在开发一个单页应用程序,我目前正在使用该网站的导航栏。我想在导航栏中放入一个下拉菜单,如果用户当前没有连接,可以让用户连接/注册到网站,如果他已登录则注销/更改设置。
网站使用ngRoute加载主页面内容,因此页面已经有 ng-view (我读过你每页只能有一个)。
当用户点击下拉菜单中的“登录”链接时,我想打开一个带登录表单的模式(当用户点击“注册”时,我会打开带有注册表单的模式)。
我知道如何向页面添加模态,但我想在第一次打开模态时从外部模板文件加载它(就像主内容视图一样)。
该网站可能有多个模态,我不想在每次生成页面时都放置很多隐藏模态。
你可能已经注意到了,我是Angular.js的新手,所以我想知道这个库是否为我提供了一个简单的方法。
以更简单的方式解释我想要做的事情:
我会通过添加指示已加载哪些模态的变量来解决这个问题(新模态将附加到具有唯一ID的页面)但我不确定这是一个很好的解决方案。
答案 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(这是我试图完成的)。