0

ユーザーが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: ''
    }; 
  })
4

2 に答える 2

3

要件を達成するには、 ngSwitchが作成するonため、ng-switch モデル を保持するラッパー コントローラーが必要です。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 タグに移動します。式に一致させたい場合は、ボディ タグのディレクティブを読み取る必要があります。

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

ここを参照

ここで、サインアップは myApp スコープ内のブール値であり、サインイン基準が満足できる場合に変更される可能性があります

$rootScope.signup = true;

ng-show および ng-hide ディレクティブを使用して同様のことを達成することもできます

于 2014-02-11T10:14:39.810 に答える