使用作用域将参数传递到指令回调中。

Question

我有一个鼠标轮指令，当鼠标移动时调用它。但是，如何在回调期间传递滚动位置？

export function ngMouseWheelDown() {
    return function (scope: angular.IScope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel",
            function (event) {

                // cross-browser wheel delta
                var event = window.event || event; // old IE support
                var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

                if (delta < 0) {
                    scope.$apply(function () {
                        scope.$eval(attrs.ngMouseWheelDown);
                    });
                }
            });
    }
}

HTML

<div ng-mouse-wheel-up="$ctrl.scrollEvent($event)"
     ng-mouse-wheel-down="$ctrl.scrollEvent($event)"
     style="overflow-y: auto;">

Answer 1

使用locals方法的$eval参数：

export function ngMouseWheelDown() {
    return function (scope: angular.IScope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel",
            function (event) {

                // cross-browser wheel delta
                var event = window.event || event; // old IE support
                var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

                if (delta < 0) {
                    var locals = {$event: event, $delta: delta};
                    scope.$apply(function () {
                        scope.$eval(attrs.ngMouseWheelDown, locals);
                    });
                }
            });
    }
}

用法：

<div ng-mouse-wheel-up="$ctrl.scrollEvent($event, $delta)"
     ng-mouse-wheel-down="$ctrl.scrollEvent($event, $delta)"
     style="overflow-y: auto;">

有关更多信息，请参见- AngularJS范围.$AngularJS引用。

Answer 2

你不需要评估。AngularJs具有绑定功能--能够从父级到子级(从控制器到指令)计算和传递任何您想要的内容，只需创建像下面这样的作用域指令：

return {
    scope: {handler: '='},
    link: function ($scope, $elem, $attrs){
                 element.bind("", function(event){
                         ...
                         $scope.handler(...);
                  })
           }
}

但是，正如@georgeawg所提到的，创建一个孤立的作用域并不总是一个好主意，因为在一个元素中只能有一个单独的作用域。

因此，为了达到这个目的，您可以使用$parse服务评估属性的回调：

['$parse', function myDirective($parse){return {
     link: function myDirecitveLink($scope, $elem, $attrs) {
               // this is the only expression that can be evaluated whenever 
               // you need
               const handlerExpression = $parse($attrs['myHandlerName']); 

               // this is real handler you can call and pass params
               const readlHandler = handlerExpression($scope); 

               // now you can call your handler with desired params
               realHandler(...);
    }
}}]

这也将为您节省一些CPU，因为您不会创建新的观察者，并且可以完全管理计算表达式的时间和次数。

@georgeawg谢谢你的评论