AngularJS创建自定义事件指令

Question

我有一个简单的属性限制指令，如

app.directive('akMouseOver', function () {
return {
    restrict: 'A',
    scope: {
        mouseOver: '&akMouseOver'
    },
    controller: function ($scope) {
    },
    link: function (scope, elem, attrs) {
        elem.bind('mouseover', function () {
            scope.mouseOver({ hValue: value });
        });
    }
}})

我正在调用一个简单的 HTML 按钮作为

<button ak-mouse-over='btnMouseOver('Win Win')' class='btn btn-primary'> Hello There !</button>

我的父控制器方法是

$scope.btnMouseOver = function (hValue) {
    alert(hValue + 'Hello !!!');
}

在这里，不知何故，我无法将参数传递给父方法。如果我在没有参数的情况下进行此实现，它正在工作并且如果我将鼠标悬停在按钮上，我会看到alert()。

查找传递 （a） 参数而不添加其他属性/指令/范围变量。

Answer 1

在您的情况下，它应该可以工作，然后它会Win Win Hello !!!发出警报，因为您具有函数级别的硬编码值，即使您从指令传递值，它也只会传递相同的值。

在将值从指令传递到隔离作用域的注册函数时，您应该有btnMouseOver(hValue)，因为当您调用指令mouseOver函数时，该指令基本上将调用btnMouseOver ak-mouse-over属性上注册的方法。

在传递值时，您需要以 JSON 格式将值传递给父控制器函数，例如{hValue: value}其中hValue将表示btnMouseOver函数的参数，放置在ak-mouse-over上，然后value是您要传递给函数的值。

<button ak-mouse-over="btnMouseOver(hValue)">
    Hello There !
</button>

此外，您还需要从事件处理程序调用scope.$apply() mouserover以在角度上下文之外运行事件时保持摘要周期。

在这里演示