AngularJS指令 - 将函数作为参数传递给“＆”属性

Question

我非常深刻地了解angular directive ，并且我正在尝试做一些非常简单的事情，我认为它不受角度的支持。
我正在尝试将函数作为参数传递给指令隔离范围（类型& ）。
我只想将“ @ ”范围值传递给我的控制器中实现的函数。
看起来用参数调用“ & ”scope属性似乎是不可能的。

<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：如何将参数/函数传递给指令？
但它不是我想要的，我只想注册控制器，从指令内部触发的事件（事件可以传递参数）。

有办法做到这一点吗？

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);
    };
});

Answer 2

正如Jussi Kosunen在评论中所说，您可以使用“=”运算符而不是“＆”来访问函数作为隔离范围中的变量。

最小指令可能如下所示：

directive('exDir', function () {
    return {
        scope: {isolateScopeFunction: "=fun"},
        template: '<button ng-click="isolateScopeFunction(\'inside isolateScope\')">press</button>'
    };
});

你会像这样使用它：

<div ex-dir fun="outerScopeFunctionName"></div>