尝试使用“指令”制作图表无效

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) {

在scope.$watch中，你使用了

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

attrs，但是在link函数中，你定义为atrr；可能是一个简单的打字错误。

聊天更新：

图表标签上没有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

尝试使用“指令”制作图表无效

Trying to make a chart using `directive` not working

javascript

angularjs

angularjs-directive