AngularJS: Почему мое поле недействительно?

Question

У меня есть пользовательская проверка для пароля

app.directive('userPassword', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.myValidator = function(modelValue, viewValue) { 
       var msg = helper.validation.user.localPassword(modelValue) 
       ctrl.$error.message = msg 
       ctrl.required = helper.validation.user.localPassword() 
       return ! msg 
      } 
     } 
    } 
}) 

Это мой пароль HTML:

<div class="my-form-group"> 
    <label for="signup_password">Password:</label> 
    <input ng-model="password" type="password" name="password" id="signup_password" 
     placeholder="Enter Password" 
     user-password ng-required="signupForm.password.required" class="my-form-control"> 
</div> 

Когда я вхожу abcd, возвращаемое значение функции директива link является true. Когда я проверить элемент, я получил это:.

class="my-form-control ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-valid-my-validator ng-touched" 

Как вы можете видеть, как required и my-validator правомочно (ng-valid-required и ng-valid-my-validator Почему мой класс еще ng-invalid

Когда я осмотреть всю форму? , это ng-valid

Update. Если я использую scope вместо ctrl, он работает.

ctrl.$validators.myValidator = function(modelValue, viewValue) { 
    var msg = helper.validation.user.localUsername(modelValue) 

    scope.userUsername = {} 
    scope.userUsername.message = msg 
    scope.userUsername.required = helper.validation.user.localUsername() 
    return ! msg 
}; 

И в HTML

<input ng-model="username" type="text" name="username" id="signin_username" 
     placeholder="Enter Username" 
     user-username ng-required="userUsername.required" class="my-form-control"> 

<div ng-show="signinForm.username.$touched && userUsername.message"> 
    {{userUsername.message}} 
</div> 

Но я не хочу, чтобы загрязнять область видимости контроллера. Как я могу использовать ctrl вместо scope

Редактировать: Вы можете добавить следующий стиль в заголовок. Поле ввода всегда красное.

http://plnkr.co/edit/deAQoIw4KfekIh3ZOt1j?p=preview

<style> 

    input.ng-invalid.ng-touched { 
     background-color: #FA787E; 
    } 

    input.ng-valid.ng-touched { 
     background-color: #78FA89; 
    } 

    input.ng-pending.ng-touched { 
     background-color: #b3933b; 
    } 
</style> 

Answer 1

Это моя реализация для username области. Пароль должен быть почти таким же.

   var def = $q.defer() 
       ctrl.message = 'checking the server for username unique' 
       restService.checkIsUsernameUnique(modelValue, function() { 
        ctrl.message = 'ok its unique username' 
        def.resolve() 
       }, function(err) { 
        ctrl.message = err.message 
        def.reject() 
       }) 
       return def.promise; 

И в HTML

  <div ng-show="form.username.$touched && form.username.message"> 
       {{form.username.message}} 
      </div> 

Короче говоря, не помещайте сообщение внутри ctrl.$error, если вы хотите поместить сообщение без ошибок, а