AngularJS - Calling a callback function with directive?

Question

I cannot figure out why my directive is not calling my callback function from my parent page. Can you please assist?

Angular code:

    angular
        .module('myApp')
        .directive('testDirective', function () {
            return {
                bindToController: {
                    foo: '@',
                    myCallback: '&'
                },
                controller: function () {
                },
                controllerAs: 'vm',
                restrict: 'E',
                replace: true,
                scope: {},
                template: '<div>Foo is: {{ vm.foo }} <button data-ng-click="vm.myCallback()">Click to call Callback</button></div>'
            };
        });

    angular
        .module('myApp')
        .controller('ParentController', function () {
            this.myParentCallback = function () {
                alert('Called the parent callback function');
            };
        });

HTML code:

<body>
    <div data-ng-app="myApp" data-ng-controller="ParentController as ctrl">
        <test-directive foo="bar!" my-callback="ctrl.myParentCallBack"></test-directive>
    </div>
</body>

As you can see, foo binds correctly, but I can't get myCallback to work...

Thoughts?

Here it is in plnkr: (http://plnkr.co/edit/niVL5iAeOJ6XTpkpL9fu?p=preview)

check this my-callback="ctrl.myParentCallBack()" . not sure. — Upalr
– Upalr, Commented Oct 9, 2015 at 14:31
Thanks @Roy.23. This refers to the function myParentCallback which exists in ParentController. — Ricky
– Ricky, Commented Oct 9, 2015 at 14:34

rvalerio · Accepted Answer · 2015-10-09 16:12:19Z

1

It's a case problem: pass ctrl.myParentCallback with lowercase b in the callback.

Also, your plnkr has a bug, with vm.myParentCallBack. Replace with:

<test-directive foo="bar!" my-callback="ctrl.myParentCallback()"></test-directive>

http://plnkr.co/edit/VnMUekTSZyk5WagsPqkL

edited Oct 9, 2015 at 16:12

answered Oct 9, 2015 at 15:44

rvalerio

4975 silver badges5 bronze badges

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

Comments

Bas Slagter · Accepted Answer · 2015-10-09 14:48:59Z

0

You need to actually call the myParentCallBack method on your ParentController. Like so:

<test-directive foo="bar!" my-callback="ctrl.myParentCallBack()"></test-directive>

This enables you to pass on $event or such as you wish.

Edit: You also need to change your testDirective definition:

return {
    bindToController: true,
    controller: function () {},
    controllerAs: 'vm',
    restrict: 'E',
    scope: {
        foo: '@',
        myCallback: '&'
    },
    template: '<div>Foo is: {{ vm.foo }} <button data-ng-click="vm.myCallback()">Click to call Callback</button></div>'
};

Changes are that you just tell that you want to use bindToController (by specifying it with true) and are specifying the properties with the scope property of your directive definition. You mixed them up.

edited Oct 9, 2015 at 14:48

answered Oct 9, 2015 at 14:40

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

4 Comments

Ricky Over a year ago

Thanks @BasSlagter. I tried this, however it did not work. I didn't receive any error either. Any thoughts?

Ricky Over a year ago

Thanks @BasSlagter. I replaced my code with yours exactly, and still it does not work. Any thoughts here?

Bas Slagter Over a year ago

Maybe you can create a fiddle/plnkr?

Ricky Over a year ago

Thanks @BasSlagter. Here it is: (plnkr.co/edit/niVL5iAeOJ6XTpkpL9fu?p=preview)

Collectives™ on Stack Overflow

AngularJS - Calling a callback function with directive?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related