suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

我在用如下方法在angular中用D3.js 画图。第一部分是实现画图功能的。涉及到directive.js写指令,controller.js中写作用域scope,在页面中写指令的p三个部分。我的问题是:在把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的数据如下:

会出现错误。。。

为什么呀。。

仅有的幸福仅有的幸福2745 Tage vor656

Antworte allen(4)Ich werde antworten

  • ringa_lee

    ringa_lee2017-05-15 17:03:52

    既然使用了指令,尽量使用独立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
                }
            }
        }
    })

    Antwort
    0
  • 迷茫

    迷茫2017-05-15 17:03:52

    毕设呀。。。你在指令中打印一下你那个salesDataToPlot,看看是不是null,报错提示应该就是那里的原因;还有指令与控制器之间的数据传递要么使用独立作用域,然后使用scope参数绑定相应的值;要么使用继承的作用域。

    Antwort
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 17:03:52

    json文件中的key要带双引号

    Antwort
    0
  • 滿天的星座

    滿天的星座2017-05-15 17:03:52

    这是$http请求时异步的啦,而directive在dom加载时已经在编译了,那时salesData当然是undefined。

    你应该这样

    $http.get(api)
        .then(function(res) {
            appendChart();  //这时才把指令加载到dom里去
        })

    = = 我的天,题主提问可以不要直接贴代码截图么?segmentfault支持markdown语法的,亲

    Antwort
    0
  • StornierenAntwort