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
原文链接：https://www.f2er.com/angularjs/140718.html正如其他答案所解释的那样,按钮在按钮发生之前的一个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>
