Convert Jquery to angular directive

Question

Ia m new in Angular, but i know to work in Jquery, i have problem with converting some function into Angular directive. Can someone help me about that, this is my jquery function

$('.spinner .btn:first-of-type').on('click', function() {
  $(this).closest('.spinner').find('input').val(function(i, v) {
    return parseInt(v, 10) + 1;
  });
});
$('.spinner .btn:last-of-type').on('click', function() {
  $(this).closest('.spinner').find('input').val(function(i, v) {
    return parseInt(v, 10) - 1;
  });
});

Alaksandar Jesus Gene · Accepted Answer · 2016-09-16 07:16:43Z

1

angular.module("yourmodulname").directive("spinnerDirective", spinnerDirective);

function spinnerDirective(){
   return { //Edit -1
 restrict:"A", //restrict the directive to the attribute
 link: "spinnerDirectiveLink"
    }//Edit-1
}

function spinnerDirectiveLink(scope, element, attribute){


 $('.spinner .btn:first-of-type').on('click', function() {
      $(this).closest('.spinner').find('input').val(function(i, v) {
        return parseInt(v, 10) + 1;
      });
    });
    $('.spinner .btn:last-of-type').on('click', function() {
      $(this).closest('.spinner').find('input').val(function(i, v) {
        return parseInt(v, 10) - 1;
      });
    });

}

HTML

<p spinner-directive></p>

Since your question is not clear on the task, this is the general way we write down the directive. Hope from here you need to take over to convert to your task.

edited Sep 16, 2016 at 7:16

answered Sep 16, 2016 at 5:13

Alaksandar Jesus Gene

6,89113 gold badges61 silver badges92 bronze badges

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

2 Comments

Alaksandar Jesus Gene Over a year ago

Editing my answer. Missed to add return in the directive function and right click and check the console.log you will see that element is picked.

a better oliver Over a year ago

What's the point of a creating a directive if you still use selectors and jQuery?

nikjohn · Accepted Answer · 2016-09-16 05:02:56Z

0

AngularJS comes with it's own stripped down version of jQuery called jQLite. You can use it like so:

angular.element(<selector>).<operation>

You can find more documentation here

NOTE: You don't normally need to use jQuery. While jQuery does work fine with Angular, you want to use more of an Angular style of development and DOM manipulation, using directives.

answered Sep 16, 2016 at 5:02

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

1 Comment

Miomir Dancevic Over a year ago

I know that , can you make me full answer,

Collectives™ on Stack Overflow

Convert Jquery to angular directive

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