2013-05-30 3 views
7

У меня есть этот элемент:

<input type="text" name="azurerepo" 
    ng-model="item.azurerepo" 
    ng-class="{error: myForm.azurerepo.$invalid}" 
    ng-required="item.deploymentType=='azure'" 
    ui-event="{ blur : 'azureCallback()' }" /> 

Обратный вызов делает:

$scope.myForm.azurerepo.$setValidity('azurerepo',false); 

Если я ввожу данные и выйти на входе он устанавливает его недействительным.

Если я вернусь на вход, откройте все введенные данные и введите что-то еще недействительным! Я хотел бы ожидать, что это будет актуально, так как данные были набраны в.

ответ

8

Я не знаю, почему вы решили использовать угловой-UI вместо создания простой директивы, тем не менее, я полагаю, что можно добавить keyup события ui-event директивы и функцию вызова, чтобы установить действительность true здесь.

Но я предпочел бы рекомендовать вам держать его просто с пользовательской директивой:

yourApp.directive('checker', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     checkValidity: '=checkValidity' // isolate directive's scope and inherit only checking function from parent's one 
    }, 
    require: 'ngModel', // controller to be passed into directive linking function 
    link: function (scope, elem, attr, ctrl) { 
     var yourFieldName = elem.attr('name'); 

     // check validity on field blur 
     elem.bind('blur', function() { 
      scope.checkValidity(elem.val(), function (res) { 
       if (res.valid) { 
        ctrl.$setValidity(yourFieldName, true); 
       } else { 
        ctrl.$setValidity(yourFieldName, false); 
       } 
      }); 
     }); 

     // set "valid" by default on typing 
     elem.bind('keyup', function() { 
      ctrl.$setValidity(yourFieldName, true); 
     }); 
    } 
    }; 
}); 

и ваш элемент:

<input name="yourFieldName" checker="scope.checkValidity" ng-model="model.name" ng-required=... etc> 

и сама проверка контроллера:

function YourFormController ($scope, $http) { 
    ... 
    $scope.checkValidity = function (fieldValue, callback) { 
     $http.post('/yourUrl', { data: fieldValue }).success(function (res) { 
      return callback(res); 
     }); 
    }; 
    ... 
} 
+1

Я m, используя обратный вызов, чтобы сделать сообщение $ http для проверки действительности на сервере – Jon

+0

все в порядке, функция checkValidity insid e делает запрос $ http, а затем возвращает обратный вызов с ответом, который очень полезен для директивы – Kosmetika

+0

. Какова должна быть функция контроллера. На что это похоже? Спасибо за помощь! – Jon

Смежные вопросы