angular.js - AngularJS 请求 Json 并 赋值到 指令 中

问题描述

问 题

我在用如下方法在angular中用D3.js 画图。第一部分是实现画图功能的。涉及到directive.js写指令，controller.js中写作用域scope，在页面中写指令的div三个部分。我的问题是：在把contoller.js中的作用域scope的值放入json中访问时，无法画出相同的图形了。
首先贴上能实现画图功能，但是scope值写在本地的代码：
1、directive.js

2、controller.js

3、left.html

以上方法便能画出 angular+d3.js的图，如下~

可是，问题来了，想把controller.js 中的数据，变成$http.get("grade.json").success(function(data)这样请求的文件内的数据。

grade.json的数据如下：

会出现错误。。。

为什么呀。。

解决方案

既然使用了指令，尽量使用独立scope，保持指令的独立性。像你这种情况，可以改成这样

.directive('linearChart', function () {
    return {
        scope: {
            chartData: '=chartData'
        },
        restrict: 'EA',
        template: '<svg width="400" height="200"></svg>',
        link: function (scope, element, attrs) {
            scope.$watch('chartData', function (newData, oldData) {
                if (!newData) return;
                drawLineChart(newData);
            });

            function drawLineChart(data) {
                //todo
            }
        }
    }
})

这篇关于angular.js - AngularJS 请求 Json 并 赋值到 指令 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！