如何在Morris JSgraphics的Angular JS中创build一个指令

我正尝试通过创build一个Angular JS指令来创build一个使用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'], }); } }; }); 

我在浏览器上查看控制台时遇到的错误代码是：

 TypeError: Cannot call method 'match' of undefined at Object.t.parseDate (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:9523) at n.eval (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3297) at ntGrid.r.setData (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:3888) at nr (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:1680) at new n (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:4904), <anonymous>:1:11953) at link (http://127.0.0.1:8000/static/js/app/directives/directives.js:94:20) at j (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:43:157) at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:463) at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480) at e (http://127.0.0.1:8000/static/js/libs/angular/angular.min.js:38:480) <div morris-line="" class="ng-isolate-scope ng-scope" style="position: relative;"> 

错误代码指向的部分是说的部分

  element : element, 

我是Angular JS和指令的新手，希望有人能指出我如何处理这个问题的正确方向。 谢谢！

Answer 1

这是我如何与莫里斯图表。 示例是条形图：

 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 }); } }; }); 

那么你可以使用这个元素：

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

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

这是一个工作和完整的例子： http : //jsbin.com/ayUgOYuY/5/edit?html,js,output

Answer 2

你只需要改变

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

至

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