angularjs创建自定义事件指令

时间:2016-03-02 19:30:32

标签: angularjs angularjs-directive

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

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)参数/ s而不添加额外的属性/指令/范围变量。

1 个答案:

答案 0 :(得分:1)

在你的情况下它应该工作&amp;然后它会用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()事件处理程序调用{​​{1}}以保持摘要周期,因为您在角度上下文之外运行事件。

Demo here