javascript - jQuery 如何只声明一次选择器函数？

Question

我在 AngularJS 中有一个可重复使用的文本输入指令:

// form.html
<text-input key="first_name"></text-input>

// text-input.js
app.directive("textInput", ($rootScope) => {
  return {
    templateUrl: "/shared/forms/text-input/text-input.html",
    scope: true,
    link: function($scope, element, attrs) {

      $scope.key = attrs.key;

      $(document).on('keyup', '.' + $scope.key, function() {
        console.log($(this).val());
      });

    }
  }
});

// shared/forms/text-input/text-input.html
<input type="text" class="{{key}}">

当我在文本输入指令中键入内容时，它会在控制台记录我设置的输入。

但是 - 当我移动到另一个页面然后返回同一页面时问题就开始了 - 然后是

$(document).on('keyup', '.' + $scope.key, function() {
  console.log($(this).val());
});

将一次又一次地贴花。 然后 - 每次我在文本输入中输入内容时，它不会记录一次，而是连续记录 2 次，然后连续 3 次，依此类推(取决于声明函数的时间)。

我找到了解决这个问题的方法，并通过使用如下 if 语句仅注册一次:

if (!$rootScope.alreadyInited[$scope.key]) {
  $rootScope.alreadyInited[$scope.key] = true;
  $(document).on('keyup', '.' + $scope.key, function() {
    console.log($(this).val());
  });
}

但这似乎不是解决这个问题的好方法，这很烦人。

也许我可以告诉 AngularJS/jQuery 清除已注册的选择器，就像我在上面提到的每个页面更改时那样？

Answer 1

混合使用 Angular 和 jQuery 通常不是一个好主意。他们遵循不同的哲学，这些哲学往往会冲突并搞砸两者的设计模式。 (如您的问题所示)

我建议去掉 $(...).on('keyup' ...) 并用 ng-keyup 替换它

例子:

模板:

<text-input ng-keyup="onkeyup()" ng-model="myvalue" key="first_name"></text-input>

Controller :

$scope.onkeyup = function()
{
    console.log($scope.myvalue);
}