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

时间:2015-06-10 13:58:02

标签: angularjs promise

在我的控制器内部,我正在调用我的服务,其中包含我希望在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

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

4 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

由于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

答案 2 :(得分:0)

您可以将数据绑定到控制器$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>

答案 3 :(得分:0)

如果您需要在该函数之外使用响应数据,请在定义您的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));
      });
});

[/编辑]