creating angularJs directive for jquery code

Question

I am new to AngularJs. I have a jquery code which I am planning to create a AngularJs directive. How to wrap the jquery code inside a AngularJs directive. I just want to use the same jquery code but want to call the code through the AngularJs directive. Please let me know if this is possible in AngularJs?

I am updating the post with two jquery sections that I am planning to create a directive:

     $('#pie-chart1').highcharts({
       title: {
       text: 'Exporting module is loaded but buttons are disabled'
       },
       xAxis: {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
       },

       series: [{
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
      }],

      navigation: {
        buttonOptions: {
        enabled: false
      }
    }
  });

Answer 1

It is possible, but of course, there is no silver bullet. There are some jquery things that are really easy to port to angular, there are some that are harder. Generally speaking you can do everything, but the degree of difficulty can vary.

Edit: before going into doing what you are doing, you might wanna check out this:

https://github.com/pablojim/highcharts-ng

What you want to be achieved has already been achieved, so I'd recommend you don't reinvent the wheel or use their directive OR at least use it as a starting point.

Answer 2

Inside the directive, you can use jQuery. In fact, if you have jQuery loaded before Angular.js, the element passed into the linking function is already a jQuery object.

app.directive("myDirective", function() {
    return {
        link: function(scope, element) {
            element.addClass("jquery"); // or other jQuery code
        }
    };
});

Note that if jQuery is not loaded before Angular.js, the element is wrapped in jqLite, a subset of jQuery that ships with Angular.js.

EDIT Aug 8, 2014:

In your question, I see you are using Highcharts. This edit probably comes a wee bit late now, but perhaps a quick look as a tiny app using Highcharts in a directive will give you some extra insight: https://bitbucket.org/mingos/pi-approximations