使用 .on 绑定点击是否受益于 ngTouch

Does using .on to bind click benefit from ngTouch?

本文关键字：ngTouch 是否 on 绑定 使用      更新时间：2023-09-26

目前我们的项目没有ngTouch，但将来会。我们仍在学习 Angular。

我有这个简单的指令

app.directive('myDir', ['$log', function($log) {
    return {
        restrict: "A",
        link: function($scope, iElm, iAttrs, controller) {
            iElm.on('click', function($event) {
                // functionality...
            });
        }
    };
}]);

我正在绑定单击此处而不是使用ng-click因为我不希望显示 html 标记。

当我们包含这种类型的绑定时，它是否会利用ng-touch？我的意思是，如果您使用包含ng-touch的ng-click，那么单击/点击后将不再有 300 毫秒的延迟。因此，如果我不使用ng-click而只是使用.on它仍然会正常工作吗？

不，touchstart 与 click 是不同的事件。您需要执行以下操作：

element.on('click touchstart', function (event) {
  /* ... */
});

上述内容将同时为两个事件注册一个处理程序。另请记住，由于此事件处理程序是在 Angular 摘要周期之外触发的，因此您需要将其内容包装在 $scope.$apply 中。

app.directive('myDir', function ($log) {
  return {
    restrict: 'A',
    link: function ($scope, element, attrs) {
      element.on('click touchstart', function (event) {
        $scope.$apply(function () {
          // functionality...
        });
      });
    }
  };
});

编辑：回复：角摘要循环。

当您在角度控制器或角度指令内部执行操作时，所有这些逻辑都在角度摘要循环内运行。摘要循环基本上是 angular 的事件循环。只要角度是启动逻辑路径的那个，那么角度就能够确保事情以正确的顺序发生。当事情按预期在摘要周期中发生时，角度能够适当地更新 UI，一切都很好。

当您执行诸如从角度指令或控制器内部注册事件处理程序之类的操作时，了解这一点很重要。如果事件是由未包装在角度魔法中的东西触发的（就像大多数在幕后为您注册 DOM 事件处理程序的本机指令一样），则该逻辑路径发生在角度摘要周期之外。您可能会看到的副作用是，即使代码运行并按预期修改范围数据，UI 也不会更新。下次该范围变量在摘要周期中突然更改时，您将看到所做的更改。

若要解决此问题，需要手动注册要使用 angular 执行的逻辑，以便它可以在摘要周期中的适当时间执行该逻辑，并按预期更新 UI。为此，您只需将要执行的逻辑包装在$scope.$apply中，只需进行简单的回调。然后，它手动开始摘要循环，并调用您在该周期中提供的回调。

如果你很好奇，这就是ng-click指令所做的一切：

app.directive('ngClick', function ($parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var fn = $parse(attrs.ngClick, null, true);
      element.on('click', function (event) {
        scope.$apply(function () {
          fn(scope, { $event: event });
        });
      });
    }
  };
});

它使用内置的 $parse 实用程序来解析您提供给ng-click的表达式并执行它。它将局部scope传递给表达式，以便您可以在表达式内使用范围内的变量。这就是为什么你可以做 ng-click="myFunction(someScopeVar)" .它还传入一个名为$event仅在该表达式中可用的自定义变量。请注意，它只是字面上包装的 JQuery DOM 事件。另请注意，Angular 将 DOM 事件逻辑包装在对$scope.$apply的调用中，以便它在摘要循环中适当地发生。

相关文章：