AngularJS - Include variable in a callback

Question

I have an angular directive that allows a callback to be passed in the following manner:

angular
    .module('app')
    .directive('myDirective', myDirective);

function myDirective() {
    return {
        bindToController: {
            buttonClick: '&'
        },
        controller: 'MyController',
        controllerAs: 'vm',
        restrict: 'E',
        scope: {},
        templateUrl: '<div><button data-ng-click="vm.buttonClick(\'hello\')">Click me</button>'
    };
}

Then in my parent HTML, I have

<my-directive button-click="ctrl.myCallback()"></my-directive>

Then finally in my parent controller, I have

function myCallback(msg) {
    alert('message is: ' + msg);
}

The goal is to display "hello" or whatever data was passed to the callback, however this is not working.

Am I doing something wrong? It works when no arguments are specified

Thanks

FYI here is link to Plunker (http://plnkr.co/edit/F6TafMWD3EWqVCCLaMys?p=preview)

Can you show MyController code?

Dvir
– Dvir

2015-11-06 15:17:09 +00:00
Commented Nov 6, 2015 at 15:17 — Dvir
– Dvir, Commented Nov 6, 2015 at 15:17

apairet · Accepted Answer · 2015-11-07 14:50:54Z

2

When using &, you need to call the function with 1 argument which is a map of the arguments you want to pass.

<my-directive button-click="ctrl.myCallback(msg})"></my-directive>

return {
    //...
    template: '<div><button data-ng-click="vm.buttonClick({msg: \'hello\'})">Click me</button>'
}

If your function took 2 arguments, you would have:

<my-directive button-click="ctrl.myCallback(msg1, msg2})"></my-directive>

return {
    //...
    template: '<div><button data-ng-click="vm.buttonClick({msg1: \'hello\', msg2: '\'there\'})">Click me</button>'
}

function myCallback(msg1, msg2) {
    alert('message is: ' + msg1 + ' ' + msg2);
}

This GIST is pretty exhaustive regarding directive binding: https://gist.github.com/CMCDragonkai/6282750

Take a look at point 8

Another good resource is: https://thinkster.io/egghead/isolate-scope-am

UPDATE: I updated and fixed your plunkr: http://plnkr.co/edit/W4RnZeCaxfCbVcYeKXLD?p=preview

Be careful to select angular version 1.x
your directive controller must be a function if you use bindToController. An empty function is OK
Look carefully at how I named the variable for calling the myCallback and compare it with this second plunkr: http://plnkr.co/edit/OvCXC0jeycIOxyoQ0R9w?p=preview Let me know if you need more explanation regarding this point in particular.

edited Nov 7, 2015 at 14:50

answered Nov 6, 2015 at 15:20

apairet

3,16224 silver badges24 bronze badges

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

10 Comments

ste2425 Over a year ago

Shouldn't it be template not templateUrl?

apairet Over a year ago

Yes, it's fixed. Thanks

vittore Over a year ago

Wanted to give link to video egghead.io/lessons/angularjs-isolate-scope-expression-binding , but thinkster has the same content and even references egghead.

Ricky Over a year ago

Thanks @apairet. I've made the modification, however function myCallback(args) is telling me that my args is empty. Have I missed something? I will try to post an example shortly

apairet Over a year ago

@Ricky I just updated my answer and linked to 2 working plunkr. Hope this clears everything :-)

|

Emir Marques · Accepted Answer · 2015-11-06 15:49:27Z

Look this example. Use $compile for bind events scope

var app = angular.module('app', []);
app.controller('MyController', function($scope){
    $scope.buttonClick = function(msg ){
      console.log(msg);
       $scope.msg = msg;
    };
}).directive('directive', function($compile) {
    return {
        restrict : 'E',
        link : function(scope, element){
            
                var content = $compile('<div><button type="button" ng-click="buttonClick(' + "'Test Msg'" + ')">Click me</button> {{msg}}')(scope);
                element.append(content);
            
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyController">
   <directive></directive>
</div>

Collectives™ on Stack Overflow

AngularJS - Include variable in a callback

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related