Question

我正在使用指令使用AmCharts API填充图表。当前使用的函数列出了以JSON格式填充表单的数据作为函数中的参数。我希望能够将其存储为变量，因此我可以为JSON提供单独的文件。我知道你可能不得不使用$ http来获取json，但我不确定如何将它连接到指令。

var myapp = angular.module('tmn_portfolio', []);

myapp.directive('loadPortfolio',
 function () {
  return {
   restrict: 'E',
   replace:true,

   template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
   link: function (scope, element, attrs) {

        var chart = false;

        var initChart = function() {
          if (chart) chart.destroy();
          var config = scope.config || {};
           chart = AmCharts.makeChart("chartdiv", I WANT THIS TO BE A VARIABLE TO JSON FILE);

        };
        initChart();

 }//end watch           
  }
}) ;

Answer 1

您需要工厂或服务首先请求您的JSON文件并将其存储为变量：

var app = angular.module('app', []);

app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);


app.factory('data', function($http) { 
var data = {
    async: function() {
      // $http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('file.json').then(function (response) {
        // The then function here is an opportunity to modify the response
        console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return data;
});

app.controller('MainCtrl', function( data,$scope) {
  // Call the async method and then do stuff with what is returned inside our own then function
  data.async().then(function(d) {
    $scope.jsonData = d; ;
  });

});

Answer 2

比scope: true更好的解决方案是将数据传递给属性中的指令。标记将如下所示：

<load-portfolio my-data="jsonData" ></load-portfolio>

该元素将被您的模板替换。在指令中：

myapp.directive('loadPortfolio',
    function () {
        return {
            restrict: 'E',
            replace:true,
            scope: {
                myData: '='
            },
            template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
            link: function (scope, element, attrs) {
                var chart = false;
                var initChart = function() {
                    if (chart) chart.destroy();
                    var config = scope.config || {};
                    chart = AmCharts.makeChart("chartdiv", scope.myData);
                };
                initChart();
            }//end watch           
        }
    });

等号是指令范围内的属性myData与控制器范围内的属性jsonData之间的双向绑定（＆＃34;模型＆＃34;有角度）计算）。每当控制器中的数据发生变化时，它也会在指令中发生变化，并且您的UI将更新以反映出来。

现在你只需要获取json数据，对吧？你是对的，你应该使用$ http来做这件事，看起来将取决于你的具体实现，但重要的是，一旦你填充jsonData，你的指令将被更新以反映。我通常初始化将在我的控制器中异步填充的模型。一个非常简单的版本可能看起来像这样：

myapp.controller('myController', ['$scope', '$http', function($http, $scope) {
    $scope.jsonData = {};  // or '' - depending on whether you actually want the JSON string here.

    $http({
        url: '/data.json',
        method: 'GET'
    }).
    then(function(r) {
        $scope.jsonData = r.data;
    });
}]);

我认为要正确地执行它，您应该查看路由和路由的resolve属性，它允许您在控制器加载之前检索数据，并将其作为参数传递给控制器，但这是真的取决于你。

更新：与其他答案一样，我建议使用工厂/服务来调用您的服务器或API，而不是像我的示例中那样直接在控制器中使用$ http。试着在这里保持简单。当组织良好时，角度代码会更有趣。

如何在Angular中将JSON对象存储为函数参数

2 个答案: