为什么$ http响应数据不会以角度js显示?

时间:2016-01-20 03:43:32

标签: angularjs angularjs-directive angularjs-scope angular-ui-router angularjs-ng-repeat

我在angular js中做了一个指令的例子。我正在使用这个指令 https://github.com/ONE-LOGIC/ngFlowchart

当我拿静态数据..显示输出请检查我的plunker http://plnkr.co/edit/d2hAhkFG0oN3HPBRS9UU?p=preview

但是当我使用$ http请求并制作相同的json对象时。不显示图表,请使用$ http请求查看我的plunker。我有与静态相同的数据对象

http://plnkr.co/edit/Vts6GdT0NNudZr2SJgVY?p=preview

$http.get('data.json').success(function(data) {
        console.log(data)
        var arr = data
        var model={};

        var new_array = []
        for (var i = 0; i < arr.length; i++) {
            var obj = {};
            obj.name = arr[i].name;
            obj.id = arr[i].id;
            obj.x = arr[i].x;
            obj.y = arr[i].y;
            obj.color = '#000';
            obj.borderColor = '#000';
            var p = {};
            p.type = 'flowchartConstants.bottomConnectorType';
            p.id = arr[i].con_id
            obj.connectors = [];
            obj.connectors.push(p);
            new_array.push(obj);

        }
        console.log('new array')
        console.log(new_array)
          model.nodes=new_array;


        var edge = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].children.length > 0) {

                for (var j = 0; j < arr[i].children.length; j++) {
                    var obj = {};
                    obj.source = arr[i].con_id;
                    obj.destination = arr[i].children[j].con_id;
                    edge.push(obj);
                }

            }

        }
          model.edges=edge;
        console.log(edge)
        console.log("model")
          console.log(JSON.stringify(model))
          $scope.flowchartselected = [];
      var modelservice = Modelfactory(model, $scope.flowchartselected);

    $scope.model = model;
    $scope.modelservice = modelservice;

    })

任何更新?

1 个答案:

答案 0 :(得分:1)

Working Example

现在正在运作。

问题是当我们第一次加载指令时它没有参数值。因此,当图表指令尝试初始化没有参数的图表时,会出现错误。所以,它将不再起作用。

如何解决问题?

只需在页面加载时给出一个伪参数。我给了假模型,

 $scope.model = model;
 $scope.modelservice = modelservice;

因此,首先您的图表将根据虚拟值显示图表。之后,它会使用服务器($http.get()

中的数据填充图表