Question

您好我正在尝试在asp.net环境中构建登录表单，使用angular来验证输入字段。

问题在于我添加

data-ng-controller="loginC"

破坏性的其他数据-ng属性，例如用户名确实有效但是它仍然显示我的错误。

<input type="text" name="username" placeholder="username" data-ng-model="class="ng-pristine ng-untouched ng-valid" vm.username" data-ng-required="true" >

并且跨度的条件是

<span data-ng-show="form.username.$invalid && form.username.$touched" 
class="help-block">Username is required</span>

这是整个代码：

<asp:Content ID="Content2" ContentPlaceHolderID="beforeLogin" Runat="Server">  
<div class="text-center" style="padding: 50px 0">

    <!-- Main Form -->
    <div class="login-form-1 " style="padding: 1%; border-radius: 10%">
        <div class="logo">Login</div>
        <section class="card register" data-ng-app="Login" data-ng-controller="loginC">
            <form name="form" class="text-left" data-ng-submit="vm.login()">
                <div class="login-form-main-message login-group"></div>
                <fieldset>
                    <div class="form-group" data-ng-class="{ 'has-error': form.username.$invalid && form.username.$touched}">
                        <input type="text" name="username" placeholder="username" data-ng-model="vm.username" data-ng-required="true" />
                        <span data-ng-show="form.username.$invalid && form.username.$touched" class="help-block">Username is required</span>
                    </div>
                    <div class="form-group" data-ng-class="{ 'has-error': form.password.$invalid && form.password.$touched }">
                        <input type="password" name="password" id="password" placeholder="Password" class="form-control" data-ng-model="vm.password" data-ng-required="true" />
                        <span data-ng-show="form.password.$invalid && form.password.$touched" class="help-block">Password is required</span>
                    </div>
                    <div class="form-actions" style="margin: 0 auto; width: 40%;">
                        <button type="submit" data-ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary">Login</button>
                        <a href="Registration.aspx" class="btn btn-link">Register</a>
                    </div>
                </fieldset>
            </form>
        </section>
    </div>
    <!-- end:Main Form -->
</div>

当我删除data-ng-controller时，再次注意一切正常

Answer 1

AngularJS遵循MV *模式。所以你的观点（即html）通过'控制器'与应用程序逻辑对话。

设置data-ng-controller时，视图会引用其范围。您可以使用$scope.value语法访问控制器值。默认情况下，您可以使用$scope.value语法访问控制器的函数和值。但在此示例中，使用了vm.value。。例如 - vm.login()，vm.dataLoading。

此语法假定存在别名为vm的控制器。但是导入控制器时没有别名。 This question goes in to more detail about aliases.在那里，视图没有vm控制器的引用，vm.username值未定义且不验证。

使用'controller as'语法可以解决用户名问题。 ng-controller="loginC as vm"。但是，在调用方法和访问值时，您需要保持一致性，以便所有功能都能正常工作。

添加data-ng-controller破坏性其他数据-ng属性

1 个答案: