使用ng-switch來交換模板

每當用戶點擊我的角度應用程序中的「註冊」按鈕時，我試圖切換「註冊」表單的「註冊」表單，但目前沒有任何點擊按鈕時發生; 登錄表單仍然在屏幕上，沒有控制檯錯誤。任何人都可以告訴我我要去哪裏嗎？使用ng-switch來交換模板

我試圖純粹在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: '' 
    }; 
    })

來源

2014-02-11 bookthief

爲了達到您的要求，您需要一個包裝控制器，用於容納ng-switch on型號，因爲ngSwitch創建child scope。

當你點擊

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

view.name模型改變，您sign-up頁顯示你可以設計你的觀點一樣

<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，然後。

檢查Demo

來源

2014-02-11 11:14:08 Reza

在演示中看起來不錯，但是當我嘗試在我的應用程序中複製時，當我點擊註冊時會加載一個空白頁面 - 你能有一個看看我的編輯？ – bookthief

沒關係 - 我有一個流浪的div標籤。這很好，謝謝。 – bookthief

移動應用程序控制器的HTML標籤，然後在你的身體標記指令應，如果你想讀匹配表達式

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

參見here

，其中註冊在你對myApp範圍布爾值，假設將要被當簽到標準是令人滿意的改變

$rootScope.signup = true;

還可以實現與NG-展示和NG-隱藏指令類似

來源

2014-02-11 10:14:39 alfonsob

這個布爾值會在我的註冊Ctrl？或者我應該爲整個應用程序提供一個主Ctrl？非常感謝這個可能看起來像什麼的例子，對於整個MVC概念來說是非常新穎的。 – bookthief

可能你應該有一個單獨的控制器用於登錄/註銷，但是這可能會在應用程序控制器中設置一個標誌，這取決於你的要求 - 單頁應用程序登錄有很多示例 – alfonsob

你可以看看我的編輯？ – bookthief

使用ng-switch來交換模板

回答

相關問題