Javascript 如何在Morris JS图的Angular JS中创建指令

我试图通过创建一个角度JS指令来使用Morris JS创建一个图形。我的指令代码是：

Reporting.directive('morrisLine', function(){
  return {
    restrict: 'EA',
    template: '<div id="call-chart">test2</div>',
    scope: {
        data: '=', //list of data object to use for graph
        xkey: '=',
        ykey: '='
    },
    link: function(scope,element,attrs){
      new Morris.Line({
          element: element,
          data: [
                { year: '2008', value: 20 },
                { year: '2009', value: 10 },
                { year: '2010', value: 5 },
                { year: '2011', value: 5 },
                { year: '2012', value: 20 }
              ],
          xkey: '{year}',
          ykey: ['value'],
      });
   }
  };
});

---

我是新的角度JS和指令，我希望有人能告诉我如何处理这个问题的正确方向。谢谢大家!

我就是这样处理莫里斯图表的。例如条形图：

sampleApp.directive('barchart', function() {

    return {

        // required to make it work as an element
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        // observe and manipulate the DOM
        link: function($scope, element, attrs) {

            var data = $scope[attrs.data],
                xkey = $scope[attrs.xkey],
                ykeys= $scope[attrs.ykeys],
                labels= $scope[attrs.labels];

            Morris.Bar({
                    element: element,
                    data: data,
                    xkey: xkey,
                    ykeys: ykeys,
                    labels: labels
                });
        }

    };

});

sampleApp.directive（'barchart'，function（）{
返回{
//需要使其作为一个元素工作
限制：'E'，
模板：“”，
替换：正确，
//观察并操作DOM
链接：函数（$scope，element，attrs）{
变量数据=$scope[attrs.data]，
xkey=$scope[attrs.xkey]，
ykeys=$scope[attrs.ykeys]，
标签=$scope[attrs.labels]；
莫里斯酒吧({
元素：元素，
数据：数据，
xkey:xkey，
ykeys:ykeys，
标签：标签
});
}
};
});

然后您可以将其与此元素一起使用：

<barchart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></barchart>

当myModel是要传入指令的数据数组时，它应该具有与morris图表兼容的适当格式。仔细看看这个对象是如何在指令中的“link”函数中传递的

---

下面是一个有效且完整的示例：

您只需更改即可

 xkey: '{year}',
 ykey: ['value'],

到

---

由于元素未定义，因此产生了错误。请您提供指令库的链接，好吗？我为此编写了一个指令，使用angular制作morris图表：它也可以通过bower获得：

bower安装ngmorris--save

在本例中，observe是否工作不正常？@AxelFontaine:Hi，你说观察不正确是什么意思？我们仍然可以删除代码中的observe，将Morris实例放在函数外。它仍然有效。IMHO，最好使用观察来观察数据随时间的变化。主要是实时更新。好的，我终于让一切都正常了。如果使用$scope.$watchCollection（attrs.data，setData）之类的内容，则需要一个element.empty（）；很高兴你能解决它！：）

<barchart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></barchart>

 xkey: '{year}',
 ykey: ['value'],

xkey: 'year',
ykeys: ['value'],