AngularJS Direktiven: ng-click wird nicht ausgelöst, nachdem blur

Hier: http://jsbin.com/epEBECAy/25/edit

Erläutert werden, die von anderen Antworten, die Taste bewegt wird, indem das Aussehen des span-Tags, bevor ein onmouseup-Ereignis auf den button erfolgt, wodurch das Problem bei Ihnen Auftritt. Der einfachste Weg, das zu erreichen, was Sie wollen, ist Stil der form, in der Weise, dass die Darstellung der Spannweite nicht dazu führen, die Taste zu verschieben (dies ist eine gute Idee im Allgemeinen von einer UX-Perspektive). Sie können dies durch umwickeln der input element in einem div mit einem Stil, der white-space:nowrap. So lange, wie es genug horizontaler Platz für die Spannweite ist, wird die Schaltfläche nicht bewegen und die ng-click-Ereignis funktioniert wie erwartet.

<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>

Es ist, weil die Richtlinie nach dem einlegen der <span>Error</span> unterhalb, wo der Knopf gerade befindet, sich mit den click-event-location. Sehen Sie dies, indem Sie die Schaltfläche über dem Textfeld, und alles sollte funktionieren.

EDIT:

Wenn Sie wirklich müssen die Fehler in der gleichen position, und lösen das Problem ohne der Erstellung Ihrer eigenen, klicken Sie auf die Richtlinie, die Sie verwenden können ng-mousedown statt ng-click. Dies löst den click-code vor dem Umgang mit dem blur-event.

Ich würde vorschlagen, mit $parsers und $setValidity Möglichkeit, während der Validierung Telefonnummer.

app.directive('phoneNumber', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ctrl) { 
            if (!ctrl) return;
            ctrl.$parsers.unshift(function(viewValue) {
                var valid = /^\d*$/.test(viewValue);
                ctrl.$setValidity('phoneNumber', valid);
                return viewValue;
            });
            ctrl.$formatters.unshift(function(modelValue) {
                var valid = /^\d*$/.test(modelValue);
                ctrl.$setValidity('phoneNumber', valid);
                return modelValue;
            });

        }
    }
});

So, Sie werden in der Lage sein zu verwenden $valid - Eigenschaft auf ein Feld in deiner view:

<form name="form" ng-submit="doSomething()" novalidate>
    <input type="text" name="phone" ng-model="phoneNumber" phone-number/>
    <p ng-show="form.phone.$invalid">(Show on error)Wrong phone number</p>
</form>

Wenn Sie möchten zeige Fehler nur auf blur Sie verwenden können (zu finden hier: AngularJS Formen - Validierung Der Felder Nach Benutzer Feld):

var focusDirective = function () {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function (scope, element, attrs, ctrl) {
      var elm = $(element);
      if (!ctrl) return;
      elm.on('focus', function () {
        elm.addClass('has-focus');
        ctrl.$hasFocus = true;
        if(!scope.$$phase) scope.$digest();
      });
      elm.on('blur', function () {
        elm.removeClass('has-focus');
        elm.addClass('has-visited');
        ctrl.$hasFocus = false;
        ctrl.$hasVisited = true;
        if(!scope.$$phase) scope.$digest();
      });
      elm.closest('form').on('submit', function () {
        elm.addClass('has-visited');
        ctrl.$hasFocus = false;
        ctrl.$hasVisited = true;
        if(!scope.$$phase) scope.$digest();
      })
    }
  }   
};
app.directive('input', focusDirective);

So, Sie haben hasFocus Eigenschaft, wenn das Feld fokussiert ist und jetzt hasVisited Eigenschaft, wenn das Feld blured ein-oder mehrmals:

<form name="form" ng-submit="doSomething()" novalidate>
    <input type="text" name="phone" ng-model="phoneNumber" phone-number/>
    <p ng-show="form.phone.$invalid">[error] Wrong phone number</p>
    <p ng-show="form.phone.$invalid 
             && form.phone.$hasVisited">[error && visited] Wrong phone number</p>
    <p ng-show="form.phone.$invalid 
            && !form.phone.$hasFocus">[error && blur] Wrong phone number</p>
    <div><input type="submit" value="Submit"/></div>
</form>

Demo: http://jsfiddle.net/zVpWh/4/