Question

我正在尝试使用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.

我的控制器负载图表：

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

有什么问题以及如何解决这个问题？

Answer 1

改变......

link : function (scope, element, atrr) {

...到......

link : function (scope, element, attrs) {

在范围。$ watch中，您使用

chart.setData(angular.copy(JSON.parse(attrs.data)));

attrs，但在链接功能中，您将其定义为atrr;可能是一个简单的输入错误。

来自CHAT的更新：

图表标记上没有data元素;它应该是这样的：

<chart data="{{data from scope}}">

除此之外的任何事情都是另一个问题;我们正在研究Morris.js如何工作，这超出了这个问题的范围，应该作为另一个新问题打开。

Answer 2

您的指令必须有数据属性：

<chart  data="historyData | minimum:tempMin"></chart> //i am trying to load chart here.

目前，您获得的错误可能是因为数据为undefined。但它仍然无法解析，因为它不是JSON

试图使用`directive`制作图表不起作用

2 个答案: