1

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?

  1. I'm getting an element from the DOM
  2. Adding a new element to it
  3. 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?

Improve this question
5
  • JQuery can be used inside Controller, you just need to keep you bindings updated using $scope.$apply. 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. 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... 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 Commented Apr 13, 2015 at 9:35
  • 2
    I recommend that you use bootstrap tooltips rather than jquery toolips - better integration with angularjs Commented Apr 13, 2015 at 9:41

2 Answers 2

Reset to default
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.

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

2 Comments

$('.ct-chart') and angular.element(".ct-chart") are not the same. In angular.element, we can't use selectors
@mohamedrias You can, if jQuery is included. If it's not you cannot select elements anyway.
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.