Angular-в директиве проверка элемента всегда не определена

У меня есть форма, в которой мало полей ввода. Я хочу отображать сообщение об ошибке во всплывающем окне, когда пользователь фокусируется на поле ввода или нажимает кнопку отправки. Я создал одну директиву, которая добавляет атрибуты popover в поля ввода. Поэтому, когда пользователь выходит из поля ввода, я проверю проверку, если проверка не пройдена, я хочу показать всплывающее окно. Но когда я пытаюсь проверить, всегда получаю неопределенность.

Может ли кто-нибудь помочь мне в этом. Мой плункер

app.directive("errorTooltip", function($compile, $interpolate, $timeout) {
  return {
    scope: true,
    require: 'ngModel',
    link: function (scope, element, attr, ctrl) { 
          element.attr('popover-trigger', "'show'"); 
          element.attr('popover-placement', 'top');
          element.attr('uib-popover', element.attr("data-info"));

          var blurred = false;
          element.on("blur",function(event){
           blurred = true;
          });
          scope.$watch(function() {
            console.log(ctrl.$name.$invalid); //always comes undefined
            element.triggerHandler('show');
            return ctrl.$name.$invalid
          }, function(invalid) {
          if (!blurred && invalid) { 
              return
              }
             console.log("test")
              //element.toggleClass('has-error', invalid);

        });


    }
  };
});

Заранее спасибо .


person svk    schedule 09.02.2017    source источник


Ответы (1)


Замените строку:

console.log(ctrl.$name.$invalid);

С этим:

console.log(ctrl.$invalid);

Обновлен плункер здесь.

person Shalom Peles    schedule 09.02.2017
comment
у вас есть идеи, как показать всплывающее окно, когда проверка элемента не удалась? - person svk; 09.02.2017