AngularJS directive Passing parameters to isolated scope function

Question

I wrote a directive that displays one button for each product passed to the directive. The product should also be passed to the function subscribe of the directive when the button is clicked.

The issue I have is that the parameter is not passed to the function.

The directive

directives.directive('subscriptionItem', function () {
    return {
        scope: {
            // Two way binding, = is equivalent to '=activeSubscription'
            activeSubscription: '=',
            products: '=',
            googleLogin: '&',
            subscribe: '&'
        },
        restrict: 'E',
        replace: 'true',
        templateUrl: 'common/directives/subscription-item.tpl.html'
    };
});

The template

<div>
    <ion-item class="item-text-wrap">
        <h2>{{activeSubscription.status}} - {{activeSubscription.action}}</h2>

        <p>{{activeSubscription.description}}</p>
    </ion-item>
    <ion-item ng-repeat="product in products" class="item-text-wrap" ng-if="activeSubscription.action === 'PAID'">
        <h2>{{product.title | limitTo: product.title.length - 21}}</h2>

        <p>{{product.description}}</p>
        <button class="button button-block button-positive" ng-click="subscribe(product.productId)">
            Buy for {{product.price}} - {{product.productId}}
        </button>
    </ion-item>
</div>

The product.productId is correctly displayed but not passed to the function.

The directive usage

<subscription-item active-subscription="activeSubscription" products="products" google-login="googleLogin()" subscribe="subscribe(sku)"></subscription-item>

The subscribe function in the parent controller scope

$scope.subscribe = function (sku) {
    console.log('subscribe ' + sku)
    InAppBillingService.subscribe(sku)
        .then(function () {
            console.log('Success');
        })
        .catch(function (error) {
            $cordovaToast.showLongBottom(error);
        });
}

GregL · Accepted Answer · 2015-03-08 22:53:34Z

6

In order to pass make data available as a variable within the expression referred to by the subscribe attribute, which in your case is subscribe(sku), you need to supply a "locals map", when calling the function inside the directive:

    <button class="button button-block button-positive" ng-click="subscribe({sku: product.productId})">
        Buy for {{product.price}} - {{product.productId}}
    </button>

Now, when you have the variable sku in the subscribe attribute expression wherever you use that directive, it will have the value of the productId, which will then work.

Relevant section from the docs:

Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

answered Mar 8, 2015 at 22:53

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

2 Comments

Sydney Over a year ago

This is what I get in the log: Object {sku: undefined}. product.productId seems not to be interpreted. Using the method from Joe, it seems to work.

GregL Over a year ago

I verified my solution worked in this Plunkr. I tried with both AngularJS version 1.3.14 and version 1.4.0-beta.5. Double check you have made all the changes I suggested, and that you are using single curly brackets, not double inside the ng-click expression.

Joe Enzminger · Accepted Answer · 2015-03-09 02:11:46Z

1

& creates a function in your directive that returns the result of the expression after evaluation against the parent scope.

An easy fix would be to change your template to:

<button class="button button-block button-positive" ng-click="subscribe()(product.productId)">
        Buy for {{product.price}} - {{product.productId}}
</button>

And usage to

<subscription-item active-subscription="activeSubscription" products="products" google-login="googleLogin()" subscribe="subscribe"></subscription-item>

edited Mar 9, 2015 at 2:11

answered Mar 8, 2015 at 22:52

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

Comments

Hazarapet Tunanyan · Accepted Answer · 2015-07-17 15:35:18Z

0

As you know there are 3 AngularJs Directive scope methods: '@', '=', '&', but now we are going to talk about only '&' method.We are going to see , how we can implement method '&' in our applications.

When we define any function inside current scope and want to implement it to any directives,Remember one thing: you have to pay attention on your function's arguments and their order.If you want more,here is a great article about that:

http://www.w3docs.com/snippets/angularjs/angularjs-directive-scope-method.html

answered Jul 17, 2015 at 15:35

Hazarapet Tunanyan

2,85528 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS directive Passing parameters to isolated scope function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related