AngularJS将$ scope数据绑定到表单

时间:2013-08-22 15:55:58

标签: angularjs angularjs-scope

我有一个$ rootScope变量:

$rootScope.register_data = {};

我有一个包含表单的视图:

<form name="register_data">
    <div class="popup signup">
        <div class="social">
            <a ng-controller="FacebookCtrl" ng-click="login()" href="javascript:void(0)" class="facebook fb-login-button">Sign up with Facebook</a>
            <div class="clear"></div>
        </div>
        <div class="userinfo">
            <div class="left"><input type="text" ng-model="register_data.firstname" placeholder="First Name" tabindex="1" required></div>
            <div class="right"><input type="text" ng-model="register_data.email" placeholder="Email Address" tabindex="4" required></div>

            <div class="left"><input type="text" ng-model="register_data.lastname" placeholder="Last Name" tabindex="2" required></div>
            <div class="right optional"><div class="tip">optional</div><input type="text" ng-model="register_data.dob" tabindex="5" placeholder="DoB (dd/mm/yyyy)"></div>

            <div class="left"><input type="text" ng-model="register_data.phone" placeholder="Phone Number" tabindex="3" required></div>
            <div class="right password"><a href="javascript:void(0)" class="picker">&nbsp;</a><input type="password" ng-model="register_data.password" placeholder="Password" tabindex="6" required></div>
            <div class="clear"></div>
        </div>
        <div class="control">
            <span class="terms">I agree to the <a href="javascript:void(0)">terms &amp; conditions</a></span>
            <a href="javascript:void(0)" id="terms_checkbox" class="checkbox" ng-class="{checked : terms_checked}" ng-click="changeTerms()">&nbsp;</a>
            <a href="javascript:void(0)" class="button" id="register_btn" ng-click="doRegister(register_data)">Sign up</a>
        </div>
    </div>
</form>

表单的名称为register_data,每个字段都通过ng-model绑定到该字段。它似乎覆盖了我的$rootScope.register_data变量,因为当我更新时没有任何表单控件更新。虽然如果我删除表单名称然后它的工作原理。但是我需要表单名称来进行正确的表单验证。

任何人都知道如何将表单控件绑定到作用域对象,还能保持表单验证吗?

1 个答案:

答案 0 :(得分:4)

将表单名称更改为除用作模型的名称之外的其他名称,因为表单控制器将以此名称发布到相关范围。