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());
                    });
                });
            }
        };
});

向pw和pw检查字段添加keyup处理程序时出错：

TypeError：elem.add不是函数

所以我删除了.add()，然后执行

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

现在我收到以下错误：

ReferenceError：$未定义

我正在关注this codepen。我正确设置了角度应用程序，并且指令将html元素（elem，attrs，ctrl）记录下来。所以我不确定问题是什么。

Answer 1

希望我不会太迟。
要解决您的问题，只需使用$（elem）.add

码

    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 2

您的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 3

我也想使用这个指令。但是在没有加载JQuery的情况下，当没有加载jQuery时，angular使用jQLite。因此，使用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]);
        });
      });
    }
};
});

Answer 4

请确保您首先加载jQuery。 http://www.mathworks.com/help/stats/pca.html

密码检查指令elem.add错误

4 个答案: