Angularjs - Calling a controller function inside directive

Question

I'm trying to use jQuery Sparkline charts with Angularjs. I have multiple charts to display, so I've decided to create a function in the controller and call it for each chart(directive).

JS

controller

.controller('sparklineCtrl', [function(){

     this.sparklineBar = function(id, values, height, barWidth, barColor, barSpacing) {
           $('.'+id).sparkline(values, {
                type: 'bar',
                height: height,
                barWidth: barWidth,
                barColor: barColor,
                barSpacing: barSpacing
           })
      }

}])

directive

.directive('sparklineBar', function(){

        return {
            restrict: 'A',
            scope: {
                slBar: '&'
            },
            link: function(scope, element) {
                scope.slBar('stats-bar', [6,4,8,6,5,6,7,8,3,5,9,5,8,4,3,6,8], '45px', 3, '#fff', 2);
            }
        }

    })

HTML

<div data-ng-controller="sparklineCtrl as spctrl">
      <div class="chart" id="stats-bar" data-sparkline-bar data-sl-bar="spctrl.sparklineBar()"></div>                                  
</div>

Running the above code there is no error in browser console but it's not rendering the chart at all. I don't know what is wrong in my code. When I try to place function's code directly inside directive, it's working.

.directive('sparklineBar', function(){

        return {
            restrict: 'A',
            link: function(scope, element) {
                $('#stats-bar').sparkline([6,4,8,6,5,6,7,8,3,5,9,5,8,4,3,6,8], {
                    type: 'bar',
                    height: 45,
                    barWidth: 3,
                    barColor: '#fff',
                    barSpacing: 2
                })
            }
        }

    })

I don't want to use the above way as I need multiple charts. Please help me fix this using controller functions.

directive gives you acces to element which will be jQuery object when jQuery is included in page before angular. Use that instead of id selector. jQuery doesn't belong in controller, pass data into directive instead — charlietfl
– charlietfl, Commented May 17, 2015 at 22:22
Specify your controller in the directive. controller: 'sparklineCtrl', controllerAs: 'spctrl' — HankScorpio
– HankScorpio, Commented May 17, 2015 at 23:30

kwangsa · Accepted Answer · 2015-05-18 00:15:29Z

1

It is better to move the function logic into service/factory then using Injection to be used in your directive.

Example:

app.factory('sparkService', function () {
 var ss = {} ; 
 ss.slBar= function(id, values, height, barWidth, barColor, barSpacing) {
       $('.'+id).sparkline(values, {
            type: 'bar',
            height: height,
            barWidth: barWidth,
            barColor: barColor,
            barSpacing: barSpacing
       });
 };

 return ss;
}

While in directive

.directive('sparklineBar', ['sparkService',function(sparkService){

    return {
        restrict: 'A',
        scope: {
            slBar: '&'
        },
        link: function(scope, element) {
            sparkService.slBar('stats-bar', [6,4,8,6,5,6,7,8,3,5,9,5,8,4,3,6,8], '45px', 3, '#fff', 2);
        }
    }]);

answered May 18, 2015 at 0:15

kwangsa

1,71112 silver badges16 bronze badges

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

2 Comments

Body Over a year ago

Thank you for the reply. I tried your method, but no luck. What should I need to call in HTML alongside with data-sparkline-bar? is it something like data-sl-bar='....' ?

Body Over a year ago

Please ignore my reply above, it's working perfectly. Thank you very much again.

Collectives™ on Stack Overflow

Angularjs - Calling a controller function inside directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related