how to make custom directive in angular js using ionic?

Question

I am trying to make custom directive in ionic .but I am not able to display same as I do in jQuery ..Actually I am using hight chart in my application .I got solution in jQuery .But I want to make same thing in angular js .So I make a custom directive for that but I am not able to display my same output as in fiddle

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-labels/

I want to display this in my angular as shown in fiddle

I make a angular directive but it is not showing chart could you please tell me where i am doing wrong

here is my code http://play.ionic.io/app/e953fb83592c

var app = angular.module('app', ['ionic']);
app.directive('chart', function() {

    return {
        restrict: 'E',
        replace: 'true',
        scope: {
      dataArray:"=",
      xAxis_categories:"=",
      title:"=",
      subtitle:"=",
      line:"=",
      yAxisTitle:"="
        },
        template: '<h3>Hello World!!</h3>',
        link: function(s, e, a) {


        }
    };



})

app.controller('cntrl', function($scope) {

    $scope.dataArray = [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]

    $scope.xAxis_categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    $scope.title = "Title";
    $scope.subtitle = "subtitle";
    $scope.chartType="line";
    $scope.yAxisTitle="Temperature (°C)"

})

any body have any idea ? why it is not display ?

Carlos Mayo · Accepted Answer · 2015-09-04 07:58:30Z

1

In your HTML you need to modify the char tag to display the scope vars:

<chart dataArray="{{dataArray}}" xAxis_categories="{{xAxis_categories}}" title="{{title}}" subtitle="{{subtitle}}" chartType="{{chartType}}" yAxisTitle="{{yAxisTitle}}"></chart>

In your directive code you need to use the compile and link function for call the existing jQuery plugin and initialize it. Here's a link that may help you about combining existing jQuery plugins into directives.

Basically you need to call the initialize function for the chart plugin in the link function of the directive like this:

link: function(scope, element, attrs) {
        $(element).highcharts(....);
}

answered Sep 4, 2015 at 7:58

Carlos Mayo

2,1241 gold badge20 silver badges36 bronze badges

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

4 Comments

user944513 Over a year ago

Thanks for providing answer code you please provide answer in fiddle or playionic link

user944513 Over a year ago

do you have any idea ?>

Carlos Mayo Over a year ago

Here there is a directive for use Highcharts charts with Angular. Also, you forget to load jQuery in your code.

Carlos Mayo Over a year ago

Here you have a little working example http://play.ionic.io/app/4a550bb615ee

Collectives™ on Stack Overflow

how to make custom directive in angular js using ionic?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related