javascript - Angular : multiple ng-if problems

Question

我在 Controller 中验证了电子邮件地址。当出现错误时，我想显示错误消息...

在此场景中，用户输入:myname@email(无效)

验证工作正常，我的范围如下:

Object {
    email_used: false,
    email_invalid: true,
    email_required: false
}

在我的模板中，输入字段上的错误类正常工作:

<input type="email" name="email" placeholder="E-mailadres" ng-model="new_user.email" class="grid-100" ng-class="(error_register.email_used || error_register.email_invalid || error_register.email_required) ? 'error' : ''"/>

...但是我的错误消息没有显示？

<!-- ERRORS -->
<span class="ngdialog-form-error" ng-if="error_register.email_used" ng-cloak>Email is used<span>
<span class="ngdialog-form-error" ng-if="error_register.email_required" ng-cloak>Email required<span>
<span class="ngdialog-form-error" ng-if="error_register.email_invalid" ng-cloak>Email invalid<span>
<!-- / ERRORS -->

(我使用的是 Angular 1.2.0)

Answer 1

您尚未关闭 span 标记。

var app = angular.module("app", []);

app.controller("controller", function($scope) {
  $scope.error_register = {
    email_used: false,
    email_invalid: true,
    email_required: false
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<div ng-app="app" ng-controller="controller">
  <span class="ngdialog-form-error" ng-if="error_register.email_used" ng-cloak>Email is used</span>
  <span class="ngdialog-form-error" ng-if="error_register.email_required" ng-cloak>Email required</span>
  <span class="ngdialog-form-error" ng-if="error_register.email_invalid" ng-cloak>Email invalid</span>
</div>