How to use jQuery the Angular way inside a directive?

Question

I'm building a chartist Directive for my AngularJS app. What breaks my understanding at the moment is how I integrate jQuery code the Angular way.

This framework is using jQuery for creating a tooltip. The code is right here:

  var $chart = $('.ct-chart');

  var $toolTip = $chart
    .append('<div class="tooltip"></div>')
    .find('.tooltip')
    .hide();

  $chart.on('mouseenter', '.ct-point', function() {
    var $point = $(this);
    var value = $point.attr('ct:value');
    $toolTip.html(value).show();
  });

  $chart.on('mouseleave', '.ct-point', function() {
    $toolTip.hide();
  });

  $chart.on('mousemove', function(event) {
    $toolTip.css({
      left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
      top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
    });
  });

My question is: How should I translate this to an AngularJS way of doing things?

I'm getting an element from the DOM
Adding a new element to it
And then have interactions with this newly added element

What would be the way Angular is handling those things? Is a 1:1 "translation" approbate or should I put ngHide, ngMouseenter inside the view?

JQuery can be used inside Controller, you just need to keep you bindings updated using $scope.$apply. — Rishi Prakash
– Rishi Prakash, Commented Apr 13, 2015 at 9:29
I know, but in the documentation, in every book they say: If you use jQuery, you are doing probably something wrong. So I wonder if I can use just the Angular API for those things. — ohboy21
– ohboy21, Commented Apr 13, 2015 at 9:31
var $chart = $('.ct-chart'); rather than getting elements like this, you get $element directly in your directives. so its kinda angularjs finds the element for you and give you its handle... — harishr
– harishr, Commented Apr 13, 2015 at 9:34
once you have parent element adding new element is very similar to jquery only thing is to do : $comple($parent.$scope) to get the stuff binded correctly — harishr
– harishr, Commented Apr 13, 2015 at 9:35
I recommend that you use bootstrap tooltips rather than jquery toolips - better integration with angularjs — Michael Kang
– Michael Kang, Commented Apr 13, 2015 at 9:41

Pankaj Parkar · Accepted Answer · 2015-04-13 09:33:31Z

1

You could replace $ with angular.element which is the same as $ of JQuery

& the other problem is before adding any new element to angular DOM it should go through the $compile cycle, Otherwise angular will not register that part of DOM

Code

  var $chart = $('.ct-chart');

  var $toolTip = $chart
    .append($compile('<div class="tooltip"></div>')(scope))  //compiling newly added element
    .find('.tooltip')
    .hide();

  $chart.on('mouseenter', '.ct-point', function() {
    var $point = $(this);
    var value = $point.attr('ct:value');
    $toolTip.html(value).show();
  });

  $chart.on('mouseleave', '.ct-point', function() {
    $toolTip.hide();
  });

  $chart.on('mousemove', function(event) {
    $toolTip.css({
      left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
      top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
    });
  });

All other code looks fine to me.

answered Apr 13, 2015 at 9:33

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

mohamedrias Over a year ago

$('.ct-chart') and angular.element(".ct-chart") are not the same. In angular.element, we can't use selectors

a better oliver Over a year ago

@mohamedrias You can, if jQuery is included. If it's not you cannot select elements anyway.

Hazarapet Tunanyan · Accepted Answer · 2015-04-13 14:26:55Z

0

You can use Jquery style code inside AngularJs.For example getting DOM element, you can use Jquery syntax,but Angular has it's syntax to do that.With angular.element([selector]).It returns you the same thing,which Jquery does.One thing else.If you mousevent functions are not defined as angularjs scope function,you don't have to $compile the template.

answered Apr 13, 2015 at 14:26

Hazarapet Tunanyan

2,85529 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to use jQuery the Angular way inside a directive?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related