0

每当用户单击我的角度应用程序中的“注册”按钮时，我都会尝试将“登录”表单切换为“注册”表单，但目前单击按钮时没有任何反应；登录表单保留在屏幕上，并且没有控制台错误。谁能告诉我哪里出错了？

我试图纯粹在 html 中做到这一点，这甚至可能实现吗？

编辑：我在我的中包含了一个注册功能，UserCtrl它负责登录/注销。现在，当我单击注册时，警报被触发，但我收到控制台错误消息TypeError: boolean is not a function。

$scope.signup = function() {
    alert('signup function hit');
    $scope.signup = true;
}

编辑2：

<!DOCTYPE html>
<html  ng-app="myApp" >
<head>
    <title> My App</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/signin.css">
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.name">

    <div ng-switch-default ng-controller="UserCtrl">

        <div ng-show="!isAuthenticated">
            <form class = "form-signin">

                <div class="control-group">
                    <img src="img/logo.png">
                    <br />
                    <div class="controls">
                        <br />
                        <input type="text" ng-model="username" placeholder = "Email Address" >
                    </div>

                    <br />
                <div class="controls">
                    <input type="password" ng-model="password" placeholder = "Password" >
                </div>
                <div class="controls">
                    <button class = "btn btn-default" ng-click="signIn()">Sign In</button>
                    <button class = "btn btn-primary" ng-click="view.name = 'signup'">Register</button>


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


    <div ng-switch-when="signup" ng-controller = "UserNewCtrl" >
        <label>
             This is where my form should be when my signup button is clicked.
        </label>
    </div>  


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

    <div ng-show="isAuthenticated">

        <div class="col-md-2">
            //MenuBar code is here
        </div>
        //Other templates get loaded here
    <div class="col-md-10">

    <div ng-view></div>

</div>

</div>
    </div>

    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/transition.js"></script>
    <script src="js/ui-utils.js"></script>



</div>
</body>
</html>

MainCtrl.js：

angular.module('myApp.controllers')
  .controller('MainCtrl', function($scope) {
    $scope.view={
      name: ''
    }; 
  })
4

2 回答 2

3

为了满足您的要求，您需要一个包含 ng-switchon模型的包装控制器，因为 ngSwitch创建child scope.

您可以设计您的视图，例如

<body ng-controller="mainCtrl">
  <div ng-switch on="view.name">
    <div ng-switch-default ng-controller="signInCtrl">
      <h1>this is sign in page</h1>
      <a href="javascript:void(0)" ng-click="signin()">sign in</a>
      <br>
      <a href="javascript:void(0)" ng-click="view.name = 'signup'">go to sign up page</a>
    </div>
    <div ng-switch-when="signup" ng-controller="signUpCtrl">
      <h1>this is sign up page</h1>
      <a href="javascript:void(0)" ng-click="signup()">sign up</a>
      <br>
      <a href="javascript:void(0)" ng-click="view.name = null">go to sign in page</a>
    </div>
  </div>
</body>

在这里mainCtrl举行view.name，默认情况下，ng-switch-default作品意味着你的sign in page，然后当你点击

<a href="javascript:void(0)" ng-click="view.name = 'signup'">go to sign up page</a>

view.name模型改变了，你的sign-up页面出现了。

检查演示

于 2014-02-11T11:14:08.250 回答
1

将应用程序控制器移动到 html 标记，然后如果您想匹配表达式，则应该读取 body 标记中的指令

<html ng-app="myApp">
    <body ng-switch="signup">

看这里

其中 signup 是您的 myApp 范围内的布尔值，当登录条件令人满意时，它可能会被更改

$rootScope.signup = true;

您还可以使用 ng-show 和 ng-hide 指令实现类似的效果

于 2014-02-11T10:14:39.810 回答