javascript - 使用 .on 绑定(bind)点击是否受益于 ngTouch？

Question

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

我有这个简单的指令

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

我在这里进行点击绑定(bind)，而不是使用 ng-click 因为我不希望显示 html 标记。

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

Answer 1

不，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 摘要循环。

当您在 Angular Controller 内部或 Angular Directive(指令)内部执行操作时，所有逻辑都在 Angular 摘要循环内运行。摘要循环基本上是 Angular 的事件循环。只要 Angular 启动了一条逻辑路径，那么 Angular 就能够确保事情按正确的顺序发生。当摘要周期中发生预期的事情时，Angular 能够适本地更新 UI，一切都很好。

当您执行诸如从 Angular Directive(指令)或 Controller 内部注册事件处理程序之类的操作时，了解这一点非常重要。如果事件是由不是包裹在 Angular 魔法中的东西触发的(就像大多数在幕后为您注册 DOM 事件处理程序的 native 指令)，那么该逻辑路径就会发生< em>在 Angular 消化周期之外。您可能会看到的副作用是，即使代码运行并且范围数据按预期修改，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 的表达式并执行它。它将本地范围传递给表达式，以便您可以在表达式内的范围内使用变量。这就是为什么您可以执行ng-click="myFunction(someScopeVar)"。它还传入一个名为 $event 的自定义变量，该变量仅在该表达式内可用。请注意，它实际上只是 JQuery 包装的 DOM 事件。另请注意，Angular 将 DOM 事件逻辑包装在对 $scope.$apply 的调用中，以便它适本地发生在摘要循环中。