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

【问题标题】：AngularJS directive - passing function as argument to "&" attributeAngularJS 指令 - 将函数作为参数传递给“&”属性
【发布时间】：2014-10-18 12:32:57
【问题描述】：

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

<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?
但这不是我要找的，我只想将控制器注册到从指令内部触发的事件（并且事件可以传递参数）。

有什么办法吗？

【问题讨论】：

你能不使用scope.$eval吗，你不需要得到参数来传回它们......

标签： javascript angularjs function angularjs-directive

【解决方案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);
    };
});

【讨论】：

您不必粘贴完整代码，只需粘贴工作代码的一部分即可。
这是可行的，但是所有使用该指令的开发者都需要知道将这些值传递给接受属性（这使得指令 API 更加复杂）。有任何方法可以传递函数但不能调用函数（就像我的问题）
使用 "=" 而不是 "&" 来获取对函数的引用。

【解决方案2】：

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

一个最小的指令可能如下所示：

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

你会这样使用它：

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

【讨论】：