Question

我是角度js的新手，想要验证模糊的字段。当我输入值时，调用该指令并验证输入的值。我希望这发生在-blur上。我已经在html中使用on-blur来调用其他函数。

以下是指令：

app.directive("emailCheck", function(){
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue, $scope) {
            var emailPattern =  /\S+@\S+\.\S+/;
            var isEmailValid = emailPattern .test(viewValue)
            ctrl.$setValidity('emailFormat', isEmailValid);
            return viewValue;
        })
    }
 };
});

我如何检查模糊事件？

提前致谢。

Answer 1

你应该将blur事件绑定到指令。试试这样：

link: function (scope, elm, attrs, ctrl) {
    elm.bind('blur',function(){
   }) 
}

var app = angular
  .module('MyApp', [
  ])
.controller('Main', ['$scope', function ($scope) { 

}])
.directive("emailCheck", function(){
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
      elm.bind('blur',function(){
        alert("test");
      }) 
    }
 };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
      <div>
           <input type="text" ng-model="email" email-check>
     </div>
</div>

Answer 2

传统上，当您在指令中使用ngModel时，您不会决定要挂钩的事件。您订阅了ngModel连接的任何事件。默认情况下，这不仅仅是模糊。

指令的用户可以使用带有updateOn: blur``的ngModelOptions来仅更新模糊，例如：

<input 
    email-check
    name="testEmail" ng-model="testEmail"
    ng-model-options="{ updateOn: 'blur' }">

<!-- Note using "updateOn: 'blur'" NOT "updateOn: 'default blur'" -->

ngModelOptions Docs

Answer 3

你必须在指令中处理blur事件，并从html元素中删除它以便以下面的方式处理它：

app.directive("emailCheck", function(){
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        elm.on('blur', function() {
           // @TODO you will have to put your code here to handle this event
        });
    }
 };
});

Answer 4

试试这个。

define(['app'],function(app){
app.directive('myDecimals', function() {
   return {
     restrict: 'A',
     link: function(scope, elm, attrs) {

       elm.bind('blur',function(){
           elm.val(elm.val()*1);
       });
     }
   };
 });
 });

对指令中的on-blur进行角度检查

4 个答案: