通过身份验证阻止Angular js中的注册表单

时间:2014-02-07 11:41:05

标签: javascript angularjs

我正在尝试通过我的网络应用程序实现注册服务的最简单方法。该应用程序的登录页面是登录页面,其中有一个指向注册页面的链接。我似乎无法简单地重定向到部分符号 - 我认为它被身份验证阻止了。所以我已经在我的index.html中使用登录表单添加了注册表单。我正在试图弄清楚如何使用ng-show来显示注册表单并在点击注册按钮时隐藏登录表单,但是我很难用它。任何人都可以建议如何做到这一点,或者是否有更好的方法?

的index.html

<html>
<head>
    <title> Application</title>
//Links to stylesheets here
</head>
<body ng-app="myApp">

//This is what the user sees when they navigate to the page

    <div ng-controller="SignInCtrl">
        <div ng-show="!isAuthenticated" ng-hide = "signup">
            <form class = "form-signin">

                <div class="control-group">
                    <div class="controls">
            <br />
            <input type="text" ng-model="username">
            </div>

            <div class="controls">
            <input type="password" ng-model="password">
            </div>
            <div class="controls">
            <button class = "btn btn-default" ng-click="signIn()">Sign In</button>

//This is the link to sign up
            <a ng-model = "signup">Sign Up</a>

            </div>
        </div>
        </form>
        </div>

         <div ng-controller = "AccountNewController">
           <div ng-show = "signup">
             This is where my sign up form will appear when my signup button is clicked.
             </div>
        </div>      

//This part of index.html is only shown when a user has been authenticated

        <div ng-show="isAuthenticated">

            <div class="col-md-2">
 //Menu Bar code here
</div>   
<div class="col-md-10">

//Other app partials are rendered here

  <div ng-view></div>    
</div>

        </div>
    </div>

//Links to JS files here   
</body>
</html>

1 个答案:

答案 0 :(得分:0)

有些地方你的代码似乎对我没有任何意义

    <div ng-controller="SignInCtrl">
        <div ng-show="!isAuthenticated" ng-hide = "signup">
            <form class = "form-signin">

为什么当一个人完全翻转另一个时使用ng-showng-hide

//This is the link to sign up
            <a ng-model = "signup">Sign Up</a>

绑定到锚ng-model

<小时/> 我认为你只能使用ng-show来解决这个问题。

如果你能提供一个plnkr,我可以更新答案

<小时/> 修改 要通过单击某处显示DIV未经过身份验证的用户和“按需”,您可以这样:

    <div ng-controller="SignInCtrl" ng-init="signup = false">
        <div ng-show="!isAuthenticated || signup">
            <form class = "form-signin">

这是“点击注册”

//This is the link to sign up
            <button ng-click="signup = true">Sign Up</button>

或者这可以切换注册DIV

//This is the link to sign up
            <button ng-click="signup = !signup">Sign Up</button>