директива проверки пароля elem.add ошибка

Question

Делаю пароль проверку директивы для обеспечения пароля и confirm_password полей одинаковы:

angular 
    .module('myModule') 
    .directive('pwCheck', function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, elem, attrs, ctrl) { 
       var password = "#" + attrs.pwCheck; 
       elem.add(password).on('keyup', function() { 
        scope.$apply(function() { 
         ctrl.$setValidity('pwmatch', elem.val() === $(password).val()); 
        }); 
       }); 
      } 
     }; 
}); 

я получаю сообщение об ошибке при добавлении keyup обработчика как и Pw PW проверки поля:

TypeError: elem.add is not a function

Так что я удалил .add() и просто сделать

elem.on('keyup', function() {

Теперь я получаю следующее сообщение об ошибке:

ReferenceError: $ is not defined

Я следующий this codepen. Я правильно установил угловое приложение, и директива записывает html-элементы (elem, attrs, ctrl) в порядке. Поэтому я не уверен, в чем проблема.

Answer 1

Отсутствует jQuery. Но я бы предложил вам использовать переменную scope внутри вас, чтобы у вас был доступ к объему контроллера к вашей директиве, потому что не создает изолированную область.

Код

angular.module('myModule') 
.directive('pwCheck', function() { 
    return { 
    require: 'ngModel', 
    link: function (scope, elem, attrs, ctrl) { 
     var password = "#" + attrs.pwCheck; 
     elem.add(password).on('keyup', function() { 
     scope.$apply(function() { 
      ctrl.$setValidity('pwmatch', elem.val() === scope[attrs.pwCheck]); 
     }); 
     }); 
    } 
    }; 
}); 

Demo CodePen

Answer 2

убедитесь, что вы сначала загрузите jQuery. http://www.w3schools.com/jquery/jquery_get_started.asp

Answer 3

Надежда Я не слишком поздно.
Чтобы решить проблему просто использовать $ (эль) .Добавьте

код

angular 
    .module('myModule') 
    .directive('pwCheck', function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, elem, attrs, ctrl) { 
       var password = "#" + attrs.pwCheck; 
       $(elem).add(password).on('keyup', function() { 
        scope.$apply(function() { 
         ctrl.$setValidity('pwmatch', elem.val() === $(password).val()); 
        }); 
       }); 
      } 
     }; 
}); 

Answer 4

Я хотел использовать эту директиву, а также. Но без загрузки JQuery, угловой использует jQLite, когда jQuery не загружается. Таким образом, используя element.append вместо elem.add работает.

angular.module('myApp') 
.directive('pwCheck', function() { 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     var password = "#" + attrs.pwCheck; 
     element.append(password).on('keyup', function() { 
     scope.$apply(function() { 
      ctrl.$setValidity('pwmatch', element.val() === scope[attrs.pwCheck]); 
     }); 
     }); 
    } 
}; 
});