javascript - Angular Directive(指令)中的模糊无法正常工作

标签 javascript jquery angularjs

我已经创建了一个表单。我有两个电子邮件字段,一个用于电子邮件,另一个用于确认电子邮件。

我想创建一个指令,该指令将在确认电子邮件字段模糊时比较确认电子邮件字段和电子邮件字段。在确认电子邮件模糊时,我想验证并显示消息(如果它与电子邮件字段不匹配)。

怀疑:我快完成了。但不知何故,onblur 表现不正常。

以下情况之一:

当我在电子邮件字段中输入a@x时。然后在确认电子邮件字段中输入 a@t 并退出。我看到验证消息,因为它不匹配。

之后,当我返回确认电子邮件字段并创建 a@xsdf 并退出验证时,验证不会触发。但是,如果我在表单中输入其他文本框(如名字),则消息得到反射(reflect)。您能建议一下代码中的错误吗?

<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title></title>
</head>


<form name="myForm" novalidate>
  <div class="col-xs-12" ng-controller="myController">
    <br>
    <br> First Name
    <br>
    <firstname></firstname>
    <div ng-if="myForm.txtFirstName.$dirty">
      <div class="danger" ng-show="myForm.txtFirstName.$error.pattern">
        Enter First Name without Special Character
      </div>
    </div>
    <br>
    <br> Last Name
    <br>
    <input type="text" ng-model="LastName" name="txtLastName" class="form-control"></input>
    <br>
    <br> Email
    <br>
    <input type="email" name="txtemail" ng-model="Email" class="form-control"></input>
    <div ng-if="myForm.txtemail.$dirty">
      <div class="danger" ng-show="myForm.txtemail.$invalid">
        Enter Valid Email Id
      </div>
    </div>
    <br>
    <br> Confirm Email
    <br>
    <input type="text" name="txtConfirmEmail" ng-disabled="!myForm.txtemail.$viewValue"
    ng-model="EmailConfirm" match  match-Email="{{Email}}" match-Cemail="{{EmailConfirm}}" class="form-control"></input>
    <div class="danger" ng-show="mismatch">
      <span>Email and Confirm Email must match.</span>
    </div>

  </div>
</form>
</html>

https://plnkr.co/edit/Tn70GxyqAadg0EdqjFG6?p=preview

最佳答案

jquery事件不会触发$digest圆 Angular ,你应该使用$apply来触发这个圆

    scope.mismatch = false;
    debugger
    if (attrs.matchEmail === attrs.matchCemail) {
       scope.$apply(function(){
         scope.mismatch = false
      });
    } else
       scope.$apply(function(){
         scope.mismatch = true
      });
  });

关于javascript - Angular Directive(指令)中的模糊无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37078357/

相关文章:

javascript - AngularJS 中的 JSON 到 HTML 表

javascript - 在智能手机浏览器上检测悬停或鼠标悬停

javascript - $ 未定义 - 将 jQuery 与 electron.js 一起使用

javascript - 如何在新点 Highcharts 中添加动态 xaxis 类别标签名称

jquery - jquery ajax函数中的多个数据变量

javascript - 如何在对 Angular 客户端应用程序的响应中发送 API key ?

javascript - 在日期点击时关闭 Angular-bootstrap-datetimepicker

javaScript .bind() 不会返回一个新函数,该函数在调用时将具有等于我传递的 arg 的 'this'

javascript - 在工作线程中使用setTimeOut?

javascript - 按键无法在移动浏览器上使用