如何在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

      });
   }
  };
});

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