Question

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

{
  "id": "1234",
  "body": {
  "content": {
    "info": "<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>"
  }
}

当我在text-input指令中键入内容时，控制台会记录我设置的输入。

但是-当我移至另一页然后返回同一页时，问题就开始了-然后

// 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}}">

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

我找到了一种解决此问题的方法，并使用以下if语句仅将其注册一次：

$(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>

控制器：

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

Answer 2

如果使用角度，则使用角度。

使用：

$(document).on('keyup', '.' + $scope.key, function()

这是一个坏主意，而且带有角度。

使用ngKeyUp：

模板：

<input type="text" ng-model="myText" name="myText" key="myRandomName" ng-keyup="onkeyup()" />

控制器：

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

jQuery如何仅一次声明一个选择器函数？

2 个答案: