CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeionic-framework
user944513
user944513

Reputation: 12729

how to make custom directive in angular js using ionic?

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 ?

Upvotes: 1

Views: 3688

Answers (1)

Carlos Mayo
Carlos Mayo

Reputation: 2124

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

Upvotes: 1

Related Questions