Question

在我的控制器内部，我正在调用我的服务，其中包含我希望在DrinkLibrary中使用的一组数据。DrinkLibrary有一个getDrinks - 方法正在获取数据库中的数据。

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){
    console.log('connected');

    var drinkSet = function(){
        DrinkLibrary.getDrinks().success(function(data){
            var caffeineData = data;
        });
    };
    drinkSet();
});

当我致电success()时，我会在caffeineData内获取我想要的数据。当我拨打drinkSet()时，我在浏览器控制台中获取了我需要的数据。在控制器中。但是，我caffeineData方法中仅存在drinkSet。

有没有更好的方法来设置它，以便我可以在图表中使用这些数据？

Answer 1

您希望data在哪里可用？你可以做很多事情。例如：

app.controller('analysisController',function(Drink,DrinkLibrary,$rootScope,$scope){
    console.log('connected');

    var drinkSet = function(){
        DrinkLibrary.getDrinks().success(function(data){
            var caffeineData = data; // local only to this function
            $scope.caffeineData = data; // local to this controller
            $rootScope.caffeineData = data; // local to the application
        });
    };
    drinkSet();
});

参考文献：

https://docs.angularjs.org/guide/scope

https://docs.angularjs.org/api/ng/service/$rootScope

Answer 2

由于caffeineData是一个局部变量，因此它在视图中不可用。您必须将数据设置为$scope，然后才能在视图中访问它。

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){
    console.log('connected');

    var drinkSet = function(){
        DrinkLibrary.getDrinks().success(function(data){
            $scope.caffeineData = data;
        });
    };
    drinkSet();
});

在视图中。根据caffeineData的对象类型，您可以在视图中添加逻辑。

<div>{{caffeineData}}</div>

您可以在此处了解有关角度范围的更多信息https://docs.angularjs.org/guide/scope

演示 http://plnkr.co/edit/s8mWpCTV6bvxmR3hOLOM?p=preview

Answer 3

您可以将数据绑定到控制器$scope并在html中使用它

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){
   console.log('connected');

   var loadDrinks = function(){
     DrinkLibrary.getDrinks().success(function(data){
        $scope.caffeineData = data;
     });
    };
   loadDrinks();
});

<强> HTML

<ul ng-controller="analysisController">
    <li ng-repeat="drink in caffeineData">
       <label ng-bind="drink.name"></label>
    </li>
</ul>

Answer 4

如果您需要在该函数之外使用响应数据，请在定义您的drinkSet函数之前先尝试实例化变量。假设您将数据设置为caffeineData是一个数组，如下所示：

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){
  console.log('connected');

  var caffeineData = []; // could also set via $scope.caffeineData
  var drinkSet = function(){
      DrinkLibrary.getDrinks().success(function(data){
          caffeineData = data;
      });
  };
  drinkSet();
});

通过在函数外部实例化它，它不会对函数保持私有（JS有function level scope for variables）。这里的好处是，如果设置了从yoru caffeineData var构建DOM的任何内容，您可以在填充之前使其在空数组上正确构建。

除了设置数据之外，假设在成功回调中没有其他任何事情发生，我们可以在这里对您的控制器进行一项改进。看看：

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){
  console.log('connected');

  var caffeineData = []; // could also set via $scope.caffeineData
  DrinkLibrary.getDrinks().success(function(data){
      caffeineData = data;
  });
});

至于您希望在图表中使用此数据，您可以在成功回调中定义图表启动调用，仅在成功设置数据时调用图表构建功能。

[编辑] 根据我的评论，这是我建议您尝试的更新版本。你会注意到我把console.log 放在里面的成功/错误回调中，以确保你的转储到了控制台之后，无论哪种方式都解决了。我已经包含了$http.get example from the AngularJS docs中显示的注释和其他回调参数，其中的注释专门讨论了promises的异步性质。

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){
  console.log('connected');

  $scope.caffeineData = []; // could also set via $scope.caffeineData
  DrinkLibrary.getDrinks()
      .success(function(data, status, headers, config){
          // this callback will be called asynchronously
          // when the response is available
          $scope.caffeineData = data;
          console.log("Response code of the GET was: "+status);
          console.log("Data received: "+data);
      }).error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.caffeineData = null; //no data :'-(
        console.log("data: " + data);
        console.log("status: " + status);
        //console.log("headers: " + headers);
        //console.log("config: " + JSON.parse(config));
      });
});

[/编辑]

使用角度控制器中的promise中的数据

4 个答案: