javascript - 有没有办法通过指令来做到这一点？

Question

我可以毫无问题地运行指令属性中引用的 $scope 函数。问题是我需要捕获指令中触及的元素并将其传递给属性中的函数。我还没弄清楚该怎么做。隔离指令中的范围将引发错误，因为有 2 个指令试图对同一元素执行操作。

使用下面的代码，我得到的 $event 为 undefined ，当然还有一个错误。有什么办法可以实现我想要的吗？或者也许有更好的方法？

<li class="list-group-item row" data-touchstart="darkenBackground($event)" data-touchend="lightenBackground($event)">

..

angular.module('myNotes')
    .directive('touchstart', [function () {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.bind('touchstart', function(e) {
                    e.preventDefault();
                    scope.$apply(attrs.touchstart);
                });
            }
        };
    }]);

angular.module('myNotes')
    .controller('notesCtrl', ['$scope', 'Site',
        function($scope, Site) {
            Site.setTitle('My Notes');
            Site.setActiveNavLink('myNotes');

            $scope.darkenBackground = function($event) {
                angular.element($event.currentTarget)
                    .css('background-color', '#eee');
            };
            $scope.lightenBackground = function($event) {
                angular.element($event.currentTarget)
                    .css('background-color', '#fff');
            }
    }]);

Answer 1

问题是这样的:

scope.$apply(attrs.touchstart);

当您直接在 Angular 表达式上调用 scope.$apply 时(这就是 attrs.touchstart)，它会自动根据 scope 计算该表达式，因此 scope.$event (未定义)被传递给回调。

要将事件传递给回调，您可以使用 scope.$eval 的第二个参数(称为“locals”)临时包含 $event 属性计算表达式时的范围。

return {
  restrict: 'A',
  link: function (scope, elem, attrs) {
    elem.bind('touchstart', function (e) {
      e.preventDefault();
      scope.$apply(function () {
        scope.$eval(attrs.touchstart, {$event: e});
      });
    });
  }
};