在Jquery AJAX之前调用AngularJS指令

Question

我通过jquery ajax调用获取一些数据并尝试将其加载到angularjs图表中（特别是使用NVD3.org）。但是，在ajax调用完成并检索数据之前加载图表，如何使图表等待ajax调用完成？

<script>
    var dataxx= [{"x": 0, "y": 0},{"x": 4, "y": 5}];
    dataxx.push({"x":9,"y":11});
    $( document).ready(function (){
        $.ajax({
            type: "GET", 
            url: "https://demo8162910.mockable.io/json",
            dataType: 'jsonp',
            jsonp: true,
            jsonpCallback: "myJsonMethod",
            error: function(){
                alert( 'Unable to load feed, Incorrect path or invalid feed' );
            },
            success: function(data){
                dataxx.push({"x":9,"y":11,"$$hashKey":"object:13","series":0});
                for (i in data)
                {
                    //dataxx.push({x: 4, y: 5});
                    //$( "#postlist" ).append(data[i].id);
                }   

                //alert(dataxx);
                    console.log(JSON.stringify(dataxx));

            }});
    });
</script>


<script>


 angular.module('app',  ['onsen'])

    .controller('ChartController', ['$scope', function($scope) {
      this.data = [{
        key: 'Data',
        values: dataxx
      }];
    }])

    .factory('d3', [function() {
      return d3;
    }])

    .factory('nv', [function() {
      return nv;
    }])

    .directive('lineChart', ['d3', 'nv', function(d3, nv) {
      return {
        restrict: 'E',
        scope: {
          data: '=',
          height: '@',
          width: '@'
        },
        template: '<svg ng-attr-height="{{ height }}" ng-attr-width="{{ width }}"></svg>',
        link: function(scope, element) {
          var svg = element.find('svg'),
            chart;

          var update = function() {
            d3.select(svg[0])
              .datum(scope.data)
              .call(chart);
          };

          scope.$watch(function() { return angular.toJson(scope.data); }, function() {
            if (chart) {
              update();
            }
          });

          scope.$on('chartloaded', update);

          nv.addGraph(function() {
            chart = nv.models.lineChart()
              .showLegend(false)
              .showYAxis(true)
              .showXAxis(true);

            chart.xAxis
              .axisLabel('x')
              .tickFormat(d3.format('.2f'));

            chart.yAxis
              .axisLabel('y')
              .tickFormat(d3.format('.2f'));

            nv.utils.windowResize(function() {
              chart.update()
            });

            scope.$emit('chartloaded');

            return chart;
          });
        }
      }
    }]);        




</script>



<div ng-app="app" ng-controller="ChartController as main">
                              <line-chart height="250px" data="main.data"></line-chart>

                            </div>   

Answer 1

<script>
 angular.module('app',  ['onsen'])
    .controller('ChartController', ['$scope','$http', function($scope, $http) {
      $scope.data = [{
        key: 'Data',
        values: []
      }];
      $http.jsonp('https://demo8162910.mockable.io/json?callback=myJsonMethod').then(‌​function(response){ 
         console.log(response);
      //format response
      $scope.data = [{
        key: 'Data',
        values: response
      }];
     });
    }])

    .factory('d3', [function() {
      return d3;
    }])

    .factory('nv', [function() {
      return nv;
    }])

    .directive('lineChart', ['d3', 'nv', function(d3, nv) {
      return {
        restrict: 'E',
        scope: {
          data: '=',
          height: '@',
          width: '@'
        },
        template: '<svg ng-attr-height="{{ height }}" ng-attr-width="{{ width }}"></svg>',
        link: function(scope, element) {
          var svg = element.find('svg'),
            chart;

          var update = function() {
            d3.select(svg[0])
              .datum(scope.data)
              .call(chart);
          };

          scope.$watch(function() { return angular.toJson(scope.data); }, function() {
            if (chart) {
              update();
            }
          });

          scope.$on('chartloaded', update);

          nv.addGraph(function() {
            chart = nv.models.lineChart()
              .showLegend(false)
              .showYAxis(true)
              .showXAxis(true);

            chart.xAxis
              .axisLabel('x')
              .tickFormat(d3.format('.2f'));

            chart.yAxis
              .axisLabel('y')
              .tickFormat(d3.format('.2f'));

            nv.utils.windowResize(function() {
              chart.update()
            });

            scope.$emit('chartloaded');

            return chart;
          });
        }
      }
    }]);        
</script>


 <div ng-app="app" ng-controller="ChartController as main">
      <line-chart height="250px" data="main.data"></line-chart>
    </div>