使用 ng-switch 交换模板答案

【问题标题】：Using ng-switch to swap templates使用 ng-switch 交换模板
【发布时间】：2014-02-11 10:06:51
【问题描述】：

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

我正在尝试纯粹在 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: ''
    }; 
  })

【问题讨论】：

标签： javascript angularjs ng-switch

【解决方案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

【讨论】：

在演示中看起来很棒，但是当我尝试在我的应用中复制时，当我点击注册时会加载一个空白页面 - 你能看看我的编辑吗？
没关系 - 我有一个流浪的 div 标签。这很好用，谢谢。

【解决方案2】：

将应用控制器移动到 html 标签，然后如果你想匹配一个表达式，你的 body 标签中的指令应该被读取

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

见here

在您的 myApp 范围内，注册是一个布尔值，当登录条件令人满意时，它可能会被更改

$rootScope.signup = true;

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

【讨论】：

这个布尔值会进入我的注册 Ctrl 吗？或者我应该为整个应用程序设置一个主 Ctrl 吗？对于整个 MVC 概念来说，这是一个非常新的示例，我们将不胜感激。
可能您应该有一个单独的控制器用于登录/注销，但这可能会在应用程序控制器中设置一个标志，这实际上取决于您的要求 - 有许多单页应用程序登录示例
SignIn 是一个不同的函数，当用户输入他们的用户名和密码信息，然后单击登录按钮时会调用它。用于“注册”的 ng-click 是需要切换模板的那个..
@alfonsob 在 body 上设置 ng-switch="signup" 并尝试像 $scope.signup = true; 一样设置此值后这是如何工作的？
@Reza 我假设在应用程序控制器中设置了注册，应该在 html 标签上，相应地编辑了我的答案。