CODEWITHSUNDEEP
angularjsangularjs-directivemorris.js
Andy Hadjigeorgiou
Andy Hadjigeorgiou

Reputation: 613

How do I use Morris JS with Angular JS?

I'm new to Angular JS, and was hoping someone would point me in the right direction of how to make a graph using Morris JS with Angular JS the correct way. I read that it's generally bad habit to alter DOM elements but instead use an Angular js directive. How do I implement this? Thanks.

Upvotes: 2

Views: 2626

Answers (1)

dchhetri
dchhetri

Reputation: 7136

You would create a directive-wrapper for each shape. Here is a rough example,

module.directive('morrisLine', function(){
  return {
    restrict: 'EA',
    template: '<div></div>',
    scope: {
        data: '=', //list of data object to use for graph
        xkey: '=',
        ykey: '='
    },
    link: function(scope,element,attrs){
      new Morris.Line({
          element: element,
          data: scope.data,
          xkey: scope.xkey,
          ykey: scope.ykey

      });
   }
  };
});

You get the idea, you can make it complex as you need it to be.

Upvotes: 6

Related Questions