Question

每当用户点击我的角度应用中的“注册”按钮时，我都会尝试为“注册”表单切换“登录”表单，但此时点击按钮时没有任何事情发生; 登录表单仍保留在屏幕上，并且没有控制台错误。有谁能告诉我哪里出错了？

我试图纯粹用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: ''
    }; 
  })

Answer 1

为了满足您的要求，您需要一个包含ng-switch on模型的包装器控制器，因为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页面已显示。

检查Demo

Answer 2

将app控制器移动到html标记，如果要匹配表达式，则应读取body标记中的指令

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

请参阅here

注册是myApp范围内的布尔值，当signIn标准令人满意时，可能会更改

$rootScope.signup = true;

您也可以使用ng-show和ng-hide指令实现类似

使用ng-switch交换模板

2 个答案: