Bind angular template to event

Question

Bind angular template to event

I have an angular directive with a pattern like this

<Button id="testBtn">Test me<button>

Then I have a directive controller where I have my API functions for the directive. Now I need to pass the event to the calling module that the button was clicked on. So that I can figure out what to do when a button is clicked in my base application.

Something like this should go in the baseApp controller.

$scope.myDirective = {
    btnClick:function(){
     //define the function here
    }
}

My html template will look something like this:

<my-simpledirective='myDirective'></my-simpledirective>

I have a part where I can declare my configurations in $ scope.myDirective = {}, but how can I define an event definition there?

FYI: This is the way kendoUI does it, wants to do it the same way.

Something like this would also be acceptable

<my-simpledirective='myDirective' btn-clicked="myCustomClick"></my-simpledirective>

then in the controller baseApp

$scope.myCustomClick = function(){
 //called when click event received
}

+3

javascript angularjs angularjs-directive

Gaurav_soni 01 jul. '15 at 8:30

source to share

1 answer

dfsq · Accepted Answer · 2015-07-01T08:39:17+0000

You can set up a two-way binding of the scope to the config object from the controller:

app.directive('mySimpledirective', function() {
    return {
        scope: {
            config: '='
        },
        template: '<Button id="testBtn">{{config.label}}</button>',
        link: function(scope, element) {
            element.on('click', function(e) {
                scope.config.btnClick(e);
            });
        }
    };
});

and pass it to the template like this:

<my-simpledirective config='myDirective'></my-simpledirective>

Demo: http://plnkr.co/edit/ue8EX9OR17iQxIi1ekco?p=preview

Bind angular template to event

More articles: