How to create a directive with dynamic value in AngularJS

Question

I have a tiny directive which simulates 'keydown' event on element click. It works completely fine but I would like like to create a more generic one by having the possibility to pass the 'keydown' value directly from the view.

Could you please help me to understand how the feature works in angular as some of them still bit confusing :) Thanks in advance.

My directive:

app.directive('simulateKeydown', [function(){
    return function(scope, element, attr){
        var e = jQuery.Event("keydown");
        e.which = 36;
        element.bind('click', function(){
            $(element).trigger(e);
        })

    }
}])

Current view:

<div simulate-keydown></div>

Desired view:

<div simulate-keydown="36"></div>

baao · Accepted Answer · 2016-11-21 00:36:22Z

1

The attr argument (here return function(scope, element, attr)) holds all your attributes. So simply use it.

app.directive('simulateKeydown', [function(){
    return function(scope, element, attr){
        var e = jQuery.Event("keydown");
        e.which = parseInt(attr.simulateKeydown); // the value you gave it
        element.bind('click', function(){
            $(element).trigger(e);
        })
    }
}])

You can then use the directive as desired

<div simulate-keydown="36"></div>

edited Nov 21, 2016 at 0:36

answered Nov 21, 2016 at 0:26

baao

73.5k18 gold badges152 silver badges208 bronze badges

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

2 Comments

egurb Over a year ago

In this case, it stops working. Although, when console.log(attr.simulateKeydown) it returns the value I passed to the directive in the view, but the event is not triggering

egurb Over a year ago

Yes, now works :) Thanks for you help, it's all clear!

Farzad Salimi Jazi · Accepted Answer · 2016-11-21 00:29:51Z

1

<script>

var app = angular.module("myApp", []);
app.directive('simulateKeydown', [function(){
    return function(scope, element, attr){
        var e = jQuery.Event("keydown");
        e.which = attr.key;
        element.bind('click', function(){
            $(element).trigger(e);
        })

    }
}])

</script>
<div ng-app="myApp">
    <div simulate-keydown data-key="36"></div>
</div>

answered Nov 21, 2016 at 0:29

Farzad Salimi Jazi

76010 silver badges26 bronze badges

1 Comment

egurb Over a year ago

Thanks for the response, also very useful!

Collectives™ on Stack Overflow

How to create a directive with dynamic value in AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related