我正在尝试在我的网络应用中创建一个多步骤表单进行注册。
我正在使用ui.router
来实现这一目标。
当用户首先访问我的域名时,例如www.mydomain.com。我的node.js服务器呈现index.ejs页面。
app.get('/',function(req, res) {
res.render('index.ejs'); // load the index.ejs file
});
现在要知道的重要一点是 index.ejs 也是我在ui-view
注入观点的地方:
<!doctype html>
<html ng-app="myApp">
<head>
<title>Node Authentication</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-animate.min.js"></script>
<link href="./css/side-menu.css" rel="stylesheet" type="text/css">
<script src="./js/mainApp.js"></script>
<script src="./js/controllers/knowledgeBaseCtrl.js"></script>
<script src="./js/services/knowledgeBaseFilter.js"></script>
</head>
<body ng-controller="projectsFilterCtrl">
<div class="container">
<div>
<h2>Our multistep form</h2>
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref="signup.stepOne"><span>1</span> Step One</a>
<a ui-sref-active="active" ui-sref="signup.stepTwo"><span>1</span> Step Two</a>
<a ui-sref-active="active" ui-sref="login"><span>2</span> login </a>
</div>
</div>
// INJECT VIEW HERE
<div ui-view></div>
</div>
</script>
</body>
</html>
我的AngularJs控制器:
var knowledgeBaseCtrl = angular.module('knowledgeBaseCtrl', ['ngAnimate','ui.router'])
knowledgeBaseCtrl.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {// this will be the wrapper for our wizard
url: '/login',
templateUrl: './login.ejs',
})
.state('signup', {// this will be the wrapper for our wizard
url: '/signup',
templateUrl: './index.ejs',
})
.state('signup.stepOne', {// this will be the wrapper for our wizard
url: '/stepOne',
templateUrl: './stepOne.ejs',
})
.state('signup.stepTwo', {// this will be the wrapper for our wizard
url: '/stepTwo',
templateUrl: './stepTwo.ejs',
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('login');
});
现在问题:
现在当我转到www.mydomain.com/#/signup/stepOne
时,它会加载内容两次,如下图所示。
我认为是因为我的node.js服务器加载了index.ejs,然后我的ui.router再次加载index.ejs,从而复制了页面。
我怎样才能解决这个问题?
答案 0 :(得分:1)
不要将index
文件放在路线中 - 您设置为模板的任何内容都会全部注入ui-view
,因此您可以有效地嵌套第二个实例你的应用程序在视图中。您的index.ejs
应该只包含应用的每个部分都相同的内容。
您应该创建一个signup.ejs
模板,其中只包含应该在注册页面上显示的内容,而另一个ui-view
您希望注入子视图。
答案 1 :(得分:0)
这看起来像你的路由器配置问题...
.state('signup', {// this will be the wrapper for our wizard
url: '/signup',
templateUrl: './index.ejs',
})
.state('signup.stepOne', {// this will be the wrapper for our wizard
url: '/stepOne',
templateUrl: './stepOne.ejs',
})
.state('signup.stepTwo', {// this will be the wrapper for our wizard
url: '/stepTwo',
templateUrl: './stepTwo.ejs',
});
如果你使用signup.stepOne和signup.step两个属于他们自己的状态而不是他们父母的子状态&#34;注册&#34;那么这将解决问题。
但是,如果你真的想实现子状态,我相信,父状态应该是一个抽象状态。
.state('signup', {// this will be the wrapper for our wizard
abstract: true
url: '/signup', // This provides the default URL for children but it can be overriden
templateUrl: './index.ejs', // This provides the default template for children but it can be overriden
})
希望这会有所帮助
另见Joe Clay的回答
答案 2 :(得分:0)
请在路线或视图中添加控制器名称
$ routeProvider .when(&#39; / login&#39;,{ 控制器:&#39; stepOneController&#39;, templateUrl:&#39; ./ stepOne.ejs&#39; })