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クリックイベントを読み込むことができますどのような方法があります動的に追加されたコンテンツ?
ええ、私はミックスしたくなかったが、(明らかに)私はAngularをかなり新しくしていて、それをどうやって行うのか分からなかった。 Angular-UIを使用してビューやテンプレートを変更することで、何を意味するのか明確にできますか?ありがとう。 – doug
私は答えを改訂しました。 Angular-UIは素晴らしいですが、初心者としては少しです。あなたのログイン/レジスタ関数をよりRESTfulなバックエンドに移す必要があります。また、scopeAsをより良く管理するために、controllerAs構文を使い始めるべきです。それについてのより良い説明はJohn Papaから来たものです。 – MBielski
ありがとうございました。私は1ページのアプリケーションではなくなってしまいましたが、あなたのやり方は理にかなっています。 – doug