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

我得到了这样的工作，但我不确定它是否是最佳/正确的方法：

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

...

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

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

            $scope.darkenBackground = function(event) {
                var elem = angular.element(event.currentTarget);

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

Answer 2

问题在于：

scope.$apply(attrs.touchstart);

当你直接在角度表达式上调用scope.$apply时（attrs.touchstart就是这样），它会自动根据scope评估该表达式，所以scope.$event（这是scope.$eval undefined）传递给回调。

要将事件传递给回调，您可以使用$event的第二个参数（称为“locals”）在评估表达式时暂时在作用域中包含return { restrict: 'A', link: function (scope, elem, attrs) { elem.bind('touchstart', function (e) { e.preventDefault(); scope.$apply(function () { scope.$eval(attrs.touchstart, {$event: e}); }); }); } };属性。

...
"Participants":[  
  "aaa@bbb.com",
  "ccc@ddd.com"
],
...

有没有办法用指令做到这一点？

2 个答案: