Question

目前我们的项目没有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-click的{{1}}，则点按/点按后将不再有300毫秒的延迟。因此，如果我不使用ng-touch而只使用ng-click，它仍然可以正常工作吗？

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

编辑：Re：Angular digest cycle。

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

当您执行诸如从angular指令或控制器内部注册事件处理程序之类的操作时，这一点非常重要。如果事件是由不包装在角度魔术中的东西触发的（就像大多数在幕后为你注册DOM事件处理程序的本机指令一样）那么逻辑路径正在发生 <角度摘要周期的em> outside 。您可能会看到的副作用是，即使代码运行并且范围数据按预期进行了修改，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在调用$scope.$apply时将DOM事件逻辑包装起来，以便它在适当的摘要周期中发生。

是否使用.on绑定来自ngTouch的点击优惠？

1 个答案:

编辑：Re：Angular digest cycle。