AngularJS directive - passing function as argument to "&" attribute

Question

I know angular directive very deeply, and I'm trying to do something very simple, and I think it's not supported in angular.
I'm trying to pass a function as argument to the directive isolated scope (type &).
I just want to deliver the "@" scope values to the function implemented in my controller.
It seems like it's impossible to call the "&" scope attribute with arguments.

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

Here is the full demo: http://jsfiddle.net/chezih/y85Ft/401/

I've read this question: AngularJS: How to pass arguments/functions to a directive?
But it's not what I'm looking for, I just want to register the controller, to event that triggered from inside the directive (and the event can pass arguments).

There is any way to do this?

can you not use scope.$eval, you wont need to get the argument to pass them back... — harishr
– harishr, Commented Aug 25, 2014 at 11:11

Pascalz · Accepted Answer · 2014-08-25 11:22:41Z

3

this is working like this :

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

edited Aug 25, 2014 at 11:22

answered Aug 25, 2014 at 11:17

Pascalz

2,3581 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahil Wazir Over a year ago

You don't have to paste the full code, just the portion of the working code.

cheziHoyzer Over a year ago

It's works, but all the develpoers that use this directive need to know to pass those values to accept attribute (it's make the directive API more complex). there's any way to pass the function but not to call the function (likemy question)

Jussi Kosunen Over a year ago

Use "=" instead of "&" to get a reference to a function.

Spencer Stejskal · Accepted Answer · 2015-02-18 17:58:57Z

0

As Jussi Kosunen said in the comments, you can use the "=" operator instead of "&" to get access to a function as a variable in your isolate scope.

A minimal directive could look like this:

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

and you would use it like this:

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

answered Feb 18, 2015 at 17:58

Spencer Stejskal

4982 gold badges6 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS directive - passing function as argument to "&" attribute

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related