如何在Angular JS中使用Morris 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

      });
   }
  };
});

你明白了,你可以根据需要使它变得复杂.