javascript - AngularJS 指令 - 将函数作为参数传递给 "&"属性

Question

我对 angular 指令 非常了解，我正在尝试做一些非常简单的事情，但我认为它在 angular 中不受支持。
我正在尝试将函数作为参数传递给指令隔离范围(类型 &)。
我只想将“@”范围值传递给在我的 Controller 中实现的函数。
似乎不可能用参数调用“&”范围属性。

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <testkeyvalue accept="blabla" key='keyA' value='valueA' />
    </div>
</div>

var myApp = angular.module('MyApp', [])
myApp.directive('testkeyvalue', function ()
{
    return {
        restrict: 'E',
        replace: true,
        scope: {
            key: '@',
            value: '@',
            accept: "&"
        },
        template: '<div><label class="control-label">{{key}}</label><br/>' +
        '<label class="control-label">{{value}}</label>' ,



        link: function (scope, element, attrs)
        {

            var arr = ["key", "value", "accept"];
            for (var i = 0, cnt = arr.length; i < arr.length; i++)
            {

                scope.$watch(arr[i], function ()
                {
                    cnt--;
                    if (cnt <= 0)
                    {
                        fireaccept()
                    }
                });
            }

            var fireaccept = function ()
            {
                //This is the problem
                //I can't deliver this arguments to the "blabla" function im my controller
                scope.accept(scope.key, scope.value);
            }
        }
    };
});


myApp.controller('MyController', function ($scope, $window)
{
    $scope.blabla = function (key, val)
    {
        $window.alert("key:" + key + " val: " + val);
    };
});

这是完整的演示: http://jsfiddle.net/chezih/y85Ft/401/

我读过这个问题:AngularJS: How to pass arguments/functions to a directive?
但这不是我要找的，我只想注册 Controller ，从指令内部触发的事件(并且事件可以传递参数)。

有什么办法可以做到这一点？

Answer 1

这是这样工作的:

http://jsfiddle.net/Pascalz/hr8zua7q/

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <testkeyvalue accept="blabla(key, val)" key='keyA' value='valueA' />
    </div>
</div>

var myApp = angular.module('MyApp', [])
myApp.directive('testkeyvalue', function ()
{
    return {
        restrict: 'E',
        replace: true,
        scope: {
            key: '@',
            value: '@',
            accept: "&"
        },
        template: '<div><label class="control-label">{{key}}</label><br/>' +
        '<label class="control-label">{{value}}</label>' ,

        link: function (scope, element, attrs)
        {
            var arr = ["key", "value", "accept"];
            for (var i = 0, cnt = arr.length; i < arr.length; i++)
            {      
                scope.$watch(arr[i], function ()
                {
                    cnt--;
                    if (cnt <= 0)
                    {
                        fireaccept()
                    }
                });
            }

            var fireaccept = function ()
            {
                //This is the problem
                //I can't deliver this arguments to the "blabla" function im my controller
                scope.accept({key:scope.key, val:scope.value});
            }
        }
    };
});


myApp.controller('MyController', function ($scope, $window)
{
    $scope.blabla = function (key, val)
    {
        $window.alert("key:" + key + " val: " + val);
    };
});