CODEWITHSUNDEEP
javascriptangularjs
Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Convert Jquery to angular directive

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;
  });
});

Upvotes: 0

Views: 913

Answers (2)

Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

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.

Upvotes: 1

nikjohn
nikjohn

Reputation: 21852

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.

Upvotes: 0

Related Questions