代码之家 › 专栏 › 技术社区 › Chris

使用scope.$eval将参数传递到指令回调

angularjs-directive angularjs

Chris · 技术社区 · 7 年前

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

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;">

2 回复 | 直到 7 年前

georgeawg 7 年前

使用 locals argument of the eval method:。


   
    
     导出函数ngmousewheeldown()。{
返回函数(范围:angular.iscope、element、attrs){
element.bind(“dommousescroll mousewheel on mousewheel”,
功能(事件){

//跨浏览器轮差
var event=window.event event;//旧IE支持
var delta=math.max(-1,math.min(1,(event.wheeldata-event.detail));

如果(delta<0){
var locals=$event:event,$delta:delta
范围:$apply(函数()。{
范围:$eval(attrs.ngmousewheeldown,本地人);
})(二)
}
})(二)
}
}
用法:

<div ng mouse wheel up=“$ctrl.scrolleEvent($event,$delta)”。
ng mouse wheel down=“$ctrl.scrolleevent($event,$delta)”。
style=“overflow-y:auto;”>

有关详细信息,请参阅
-angularjs scope.$eval api reference


用法:

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


有关详细信息,请参阅
-angularjs scope.$eval api参考

Drag13 7 年前

你不需要撤离。AngularJS具有绑定-能够评估和传递任何您想要的东西,从父级到子级(从控制器到指令),您所需要的只是创建一个作用域指令,如下所示:

返回{
作用域:处理程序:'=',
链接:函数($scope,$elem,$attrs){
element.bind(“”,函数(事件){
……
$scope.handler(…);
})
}
}
但是正如@georgeawg所提到的,创建一个独立的作用域并不总是一个好主意,因为在一个元素中,您只能有一个独立的作用域。@p>

因此,为了达到这个目的,您可以使用$parseservice从属性评估您的回调:


['$parse',function mydirective($parse)返回{
链接:函数mydirecitvelink($scope,$elem,$attrs){
//这是唯一可以在
//你需要
const handlerExpression=$parse($attrs['myhandlerName']);

//这是真正的处理程序,可以调用和传递参数
const readlhandler=handlerExpression($scope);

//现在可以使用所需的参数调用处理程序
realHandler(…);
}
}}]

这也将为您节省一些CPU,因为您不会创建新的观察程序,并且可以完全管理您需要何时以及多少次来计算表达式。

@Georgeawg感谢您的评论
NT从父级到子级(从控制器到指令),您所需要的只是创建作用域指令,如下所示:

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


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

因此,为了达到这个目的,您可以使用$分析用于从属性评估回调的服务:

['$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感谢您的评论