AngularJS指令：模糊之后不会触发ng-click

发布时间：2020-12-17 09:17:30 所属栏目：安全来源：网络整理

导读：DEMO 请考虑以下示例： input type="text" ng-model="client.phoneNumber" phone-numberbutton ng-click="doSomething()"Do Something/button .directive("phoneNumber",function($compile) { return { restrict: 'A',scope: true,link: function(scope,elem

DEMO

请考虑以下示例：

<input type="text" ng-model="client.phoneNumber" phone-number>
<button ng-click="doSomething()">Do Something</button>

.directive("phoneNumber",function($compile) {
  return {
    restrict: 'A',scope: true,link: function(scope,element,attrs) { 
      scope.mobileNumberIsValid = true;

      var errorTemplate = "<span ng-show='!mobileNumberIsValid'>Error</span>";

      element.after($compile(errorTemplate)(scope)).on('blur',function() {
        scope.$apply(function() { 
          scope.mobileNumberIsValid = /^d*$/.test(element.val());
        });
      });
    }  
  };
});

看着demo,如果在手机号码末尾添加“a”,点击按钮,doSomething()就不会被调用.如果再次单击该按钮,则调用doSomething().

为什么第一次没有调用Something()？任何想法如何解决这个问题？

注意：保持模糊验证是很重要的.

这里： http://jsbin.com/epEBECAy/25/edit

正如其他答案所解释的那样,按钮在按钮发生之前的一个onmouseup事件之前被跨越的外观移动,从而导致您遇到的问题.完成你想要的最简单的方法是以这样的方式来调整窗体,使得跨度的外观不会导致按钮移动(这通常是从UX角度来看是一个好主意).您可以通过将输入元素包装在具有白色空间的样式的div中：nowrap来实现.只要跨度有足够的水平空间,按钮将不会移动,并且ng-click事件将按预期工作.

<div id="wrapper">
    <div style='white-space:nowrap;'>
        <input type="text" ng-model="client.phoneNumber" phone-number>
    </div>
    <button ng-click="doSomething()">Do Something</button>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!