Question

当用户点击“注册”时，我正在使用Angular尝试用注册表单替换我的登录表单，但我似乎无法使用第二种形式与angular进行交互，因为控制器在第二种形式之前加载形式。

截至目前，我正在使用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-click事件？

Answer 1

规则＃1：不要将jQuery与Angular混合使用，尤其是在控制器中。

您通过使用jQuery替换表单内容来打破Angular数据绑定。执行您想要做的事情的最简单方法可能是让现有用户可以看到某些字段（用户名/密码和登录按钮），单击注册按钮时可以看到其他字段（用于创建帐户）。这可以通过简单的ng-show来完成，而且你不需要第二个应用程序（就像你在你的例子中列出的那样）。

控制器......

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

通过$ http替换另一个角度app

1 个答案: