Using ng-switch to swap templates

StackOverflow https://stackoverflow.com/questions/21698707

  •  09-10-2022
  •  | 
  •  

Frage

I'm trying to switch a "sign in" form for a "sign up" form whenever the user clicks on the "Sign Up" button in my angular app, but at the moment nothing is happening when the button is clicked; The sign in form remains on the screen and there are no console errors. Can anyone tell me where I'm going wrong?

I'm attempting to do this purely in html, is this even possible to achieve?

EDIT: I included a signup function in my UserCtrl which takes care of signing in/ out. Now when I click on sign up the alert is trigger but I get a console error saying TypeError: boolean is not a function.

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

EDIT 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: ''
    }; 
  })
War es hilfreich?

Lösung

To achieve your requirement you need a wrapper controller that hold ng-switch on model because ngSwitch creates child scope.

You can design your view like

<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>

Here mainCtrl holds view.name and by default ng-switch-default works means your sign in page, then when you click 

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

view.name model changed and your sign-up page appear.

Check the Demo

Andere Tipps

move the app controller to the html tag, then the directive in your body tag should read if you want to match an expression

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

see here

where signup is a boolean in your myApp scope, that will presumably be changed when the signIn criteria is satisfactory

$rootScope.signup = true;

you can also achieve similar with the ng-show and ng-hide directives

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top