AngularJS：フォームの検証のためのディレクティブでイベントが発生しない

Question

Angularを使用して、ユーザー名の入力フィールドも持つ登録フォームを作成しています。私は、フィールドボケの際にサーバー側の「一意性」のユーザー名を確認する指示文を書きました。

App.directive('usernameCheck', ['$http', function ($http) { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      elem.on('blur', function (evt) {   
       scope.$apply(function() { 
        $http({ 
         method: 'POST', 
         url: '/usernameCheck/', <-- NEVER ACCESSED!? 
         data: {'username' : $scope.userName} 
        }).success(function(data, status, headers, config) { 
         ctrl.$setValidity('unique', data.status); 
        }); 
       }); 
      }); 
     } 
    } 
}]); 

とHTMLフォーム入力要素：

これは私の角度のコードでいくつかの奇妙な理由で

<input type="text" class="form-control" ng-model="userName" name="userName" username-check required> 

、ディレクティブが動作するようには思えません。 JSエラーは発生しませんが、blur要素は起動しません。Firebugによれば、サーバールート "/ usernameCheck"は決して呼び出されません。私は何が欠けていますか？

Answer 1

はng-blurアプローチ（簡単な一般的な例）で試してみてください。

app.directive('directiveName', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     ngBlur: '&' 
    }, 
    link:function(scope){  
     scope.onBlur = function(ev){ 
     console.log(ev); 
     }  
    },  
    template: '<input ng-blur="onBlur($event)"></input>' 
} 
});