2016-08-16 6 views
0

Angularを使用して、ユーザーが「サインアップ」をクリックしたときにログインフォームを登録フォームに置き換えようとしていますが、コントローラは第2の形式の前にロードされるからである。今の時点で、私は、フォームを置き換えるためにjQueryのhtmlの()関数を使用している、と私はちょうど関数としてのjQueryを使用していた場合、私はちょうど次の操作を行いたい

$(window).on('click','submit',function(){ 
//function here 
}); 

が、私はAngularで働くのに似た何かを得ることができません。

オリジナルフォーム:

<div ng-app="login" ng-controller="loginCtrl"> 
     <div id="formContainer"> 
      <form ng-submit="loginSubmit()" id="loginForm" name="loginForm"> 
       email: <input id="email" name="email" ng-model="email"> 
       password: <input id="pw" name="pw" ng-model="pw"> 
       <div class="row center"> 
        <span ng-click="signup()" id="signupButton" class="button">Sign Up</span> 
        <span ng-click="login()" id="loginButton" class="button">Submit</span> 
       </div> 
      </form> 
     </div> 
    </div> 

登録フォーム:

<div ng-app="signup" ng-controller="signupCtrl" class="flexRow"> 
    <form ng-submit="signupSubmit()" id="signupForm" name="signupForm"> 
     email: <input name="signupEmail" ng-model="signupEmail" type="email"> 
     password: <input name="signupPw" ng-model="signupPw"> 
     first name: <input name="signupFirstName" ng-model="signupFirstName"> 
     last name: <input name="signupLastName" ng-model="signupLastName"> 
     <div> 
      <span ng-click="register()" id="register" class="button">Register</span> 
     </div> 
    </form> 
</div> 

コントローラー:

app.controller("loginCtrl",function($scope, $http){ 

    //sign up 
    $scope.signup = function(){ 
     $http({ 
      method: "POST", 
      url: "/functions/signup", 
      data: {/* data in here */}, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).then(
      function successCallback(response){ 
       $('#formContainer').html((response.data)); 
      }, function errorCallback(response){ 
       alert('error: \n'+ response.data); 
      } 
     ); 
    } 

    //registration 
    $scope.register = function(){ 
     $http({ 
      method: "POST", 
      url: "/functions/register", 
      data: {/*data here */}, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).then(
      function successCallback(response){ 
       $('#auth').html(response.data); 
      }, function errorCallback(response){ 
       $('#auth').html('ERROR: ' + response.data); 
      } 
     ); 
    } 

}); 

私は、コントローラは、上NGクリックイベントを読み込むことができますどのような方法があります動的に追加されたコンテンツ?

答えて

1

ルール#1:jQueryをAngularと混合しないでください。特にコントローラでは使用しないでください。

フォームの内容をjQueryに置き換えて、角度データバインディングを解除しています。おそらく、あなたがしたいことをする最も簡単な方法は、サインアップボタンがクリックされたときに既存のユーザ(ユーザ名/パスワード、ログインボタン)のフィールドを表示し、アカウントを作成するためのフィールドを表示することです。これは、単純なNG-ショーを介して達成することができる、そしてあなたはそれのために第二のアプリを必要としない(あなたはあなたの例に記載されているように。)

<div ng-app="login" ng-controller="loginCtrl"> 
    <div id="formContainer"> 
     <form ng-show="!register" id="loginForm" name="loginForm"> 
      email: <input id="email" name="email" ng-model="email"> 
      password: <input id="pw" name="pw" ng-model="pw"> 
      <div class="row center"> 
       <span ng-click="signup()" id="signupButton" class="button">Sign Up</span> 
       <span ng-click="login()" id="loginButton" class="button">Submit</span> 
      </div> 
     </form> 
<form id="signupForm" name="signupForm"> 
    email: <input name="signupEmail" ng-model="signupEmail" type="email"> 
    password: <input name="signupPw" ng-model="signupPw"> 
    first name: <input name="signupFirstName" ng-model="signupFirstName"> 
    last name: <input name="signupLastName" ng-model="signupLastName"> 
    <div> 
     <span ng-click="register()" id="register" class="button">Register</span> 
    </div> 
</form> 
    </div> 
</div> 

とコントローラ...

app.controller("loginCtrl",function($scope, $http){ 

$scope.register = false; 

$scope.signup = function(){ 
    $scope.register = !$scope.register; 
}; 

//sign up 
$scope.login= function(){ 
    $http({ 
     method: "POST", 
     url: "/functions/login", 
     data: {/* data in here */}, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }).then(
     function successCallback(response){ 
      //do something after success, like maybe redirect to a new page 
     }, function errorCallback(response){ 
      alert('error: \n'+ response.data); 
     } 
    ); 
} 

//registration 
$scope.register = function(){ 
    $http({ 
     method: "POST", 
     url: "/functions/register", 
     data: {/*data here */}, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }).then(
     function successCallback(response){ 
      //do something after success, like maybe redirect to a new page 
     }, function errorCallback(response){ 
      alert('error: \n'+ response.data); 
     } 
    ); 
} 

}); 
+0

ええ、私はミックスしたくなかったが、(明らかに)私はAngularをかなり新しくしていて、それをどうやって行うのか分からなかった。 Angular-UIを使用してビューやテンプレートを変更することで、何を意味するのか明確にできますか?ありがとう。 – doug

+0

私は答えを改訂しました。 Angular-UIは素晴らしいですが、初心者としては少しです。あなたのログイン/レジスタ関数をよりRESTfulなバックエンドに移す必要があります。また、scopeAsをより良く管理するために、controllerAs構文を使い始めるべきです。それについてのより良い説明はJohn Papaから来たものです。 – MBielski

+0

ありがとうございました。私は1ページのアプリケーションではなくなってしまいましたが、あなたのやり方は理にかなっています。 – doug

関連する問題