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

Answer 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

angularjs创建自定义事件指令

1 个答案: