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: How to pass arguments/functions to a directive?
但它不是我想要的，我只想注册控制器，从指令内部触发的事件（事件可以传递参数）。

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

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在评论中所说，您可以使用“=”运算符代替“＆amp;”在隔离范围中访问函数作为变量。

最小指令可能如下所示：

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

你会像这样使用它：

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

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

2 个答案: