Как использовать Morris JS с Angular JS?

Question

Я новичок в Angular JS, и надеялся, что кто-то укажет мне в правильном направлении, как сделать график, используя Morris JS с Angular JS правильным способом. Я читал, что обычно это неправильная привычка изменять элементы DOM, но вместо этого используется директива Angular js. Как это реализовать? Благодарю.

Answer 1

Вы должны создать директивную оболочку для каждой фигуры. Вот приблизительный пример:

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 

     }); 
    } 
    }; 
}); 

Вы получаете идею, вы можете сделать ее сложной, как вам нужно.