添加数据 NG 控制器中断其他数据 NG 属性

Question

嗨，我正在尝试在使用角度验证输入字段的环境中 asp.net 构建登录表单。

问题是当我添加时

data-ng-controller="loginC"

破坏其他 data-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>

再次注意，当我删除数据-ng-控制器时，一切正常

Answer 1

AngularJS遵循MV*模式。因此，您的视图(即html(通过"控制器"与应用程序逻辑进行对话。

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

此语法假定存在别名为vm的控制器。但导入控制器时没有别名。这个问题将更详细地介绍别名。对于，视图没有vm控制器的引用，并且vm.username值未定义且未验证。

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