我正在尝试使用 angularjs - directive 创建图表，但我没有得到结果。我正在学习 Angular 任何人都可以帮助我解决我的问题吗？
索引页:(默认)
<!doctype html>
<html lang="en" ng-app="tempApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>My AngularJS App</title>
</head>
<body>
<ul class="menu">
<li><a href="#/current">Current</a></li>
<li><a href="#/history">History</a></li>
</ul>
<div ng-view></div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/raphael/raphael.js"></script>
<script src="bower_components/morris.js/morris.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
点击历史记录 html:(部分)
Minimum temperature: <input ng-model='tempMin' type='number'/> Celcius
<chart "historyData | minimum:tempMin"></chart> //i am trying to load chart here.
我的负载图表 Controller :
tempApp
.directive('chart', function () {
return {
template: '<div id="container"></div>',
link : function (scope, element, atrr) {
var chart = new Morris.Line({
// ID of the element in which to draw the chart.
element: 'container',
// The name of the data record attribute that contains x-values.
xkey: 'date',
// A list of names of data record attributes that contain y-values.
ykeys: ['temp'],
// Labels for the ykeys -- will be displayed when you hoverover the // chart.
labels: ['Temperature']
});
scope.$watch(function() {
chart.setData(angular.copy(JSON.parse(attrs.data)));
});
}
}
});
我收到错误:
ReferenceError: attrs is not defined
出了什么问题以及如何解决这个问题？
最佳答案
改变...
link : function (scope, element, atrr) {
...到...
link : function (scope, element, attrs) {
在scope.$watch中，您使用了
chart.setData(angular.copy(JSON.parse(attrs.data)));
attrs，但在链接函数中，您将其定义为atrr；可能是一个简单的打字错误。
聊天更新:
图表标签上没有data元素；它应该是这样的:
<chart data="{{data from scope}}">
除此之外的任何事情都是另一个问题；我们正在研究如何Morris.js作品超出了这个问题的范围，应该作为另一个新问题来打开。
关于javascript - 尝试使用 `directive` 制作图表不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29689398/