ngKeyUp上的call指令或单击textfield时

Question

我有一个设置，我在检查 usernameAvailabilty 当用户进行注册时（在模态上），但问题是 - 当页面加载时，angular指令（< strong> usernameAvailable 也会被加载 - 从而从API调用'getUserNameValidated' - 而不是在用户点击文本字段时调用。

我尝试使用 ng-keyup =“username-available” 来解决问题 但它没有帮助？任何解决方案

appEngage.directive('usernameAvailable', function ($timeout, $q, $http, apiUrl) {

    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function (scope, elm, attr, model) {
            scope.$watch(attr.ngModel, function (uname) {
                /*Validate user name ajax call*/
                //console.log("register username availability");
                $http({
                    method: "GET",
                    url: apiUrl + "getUserNameValidated",
                    contentType: "application/json",
                    dataType: "json",
                    timeout: 180000,  //180 sec
                    params: { 'username': uname }
                }).success(function (res) {
                    sessionStorage.setItem('unameAvailability', res.msg);
                    $timeout(function () {
                        if (res.msg == "Success") {
                            model.$setValidity('usernameExists', true);
                        } else {
                            model.$setValidity('usernameExists', false);
                        }
                    }, 1000);
                }).error(function (x, t, m) {
                    swal("Error connecting to server");
                    if (t === "timeout") {
                        swal("timeout");
                    } else {
                        //alert(t);
                    }
                });
            });

        }
    }
});

<div class="col-md-5">
	<input type="text" name="userName" ng-model="registerAppCtrl.registerAppDetails.user.uname" id="reg-uname" class="form-control" tabindex="5"  placeholder="User Name" username-available required/>
</div>