Angular：如何从$ http.get方法外部访问angular $ scope.ng-model_name？

Question

我正在使用$ http.get方法的angularjs代码，但是当我尝试访问$ scope.metric.label时。它给出了"Error: $scope.metric is undefined未定义的错误。我想从选择选项中创建动态网址。但我无法创建动态网址。

DEMO http://plnkr.co/edit/UrufgAUqjT8GOLz7QVsL?p=preview
在演示取消注释警告（网址）中，您将看到它无法正常工作

//Fetching the metrics and filling the metric selection options
  $http.get("https:localhost:8080/metering/data/")
    .success(function(response) {
      $scope.metrics = response.nova_meters.concat(response.glance_meters).concat(response.cinder_meters).concat(response.ipmi_meters).concat(response.neutron_meters).concat(response.swift_meters).concat(response.kwapi_meters);
      $scope.metric = $scope.metrics[0];
    });

  // Fetching the list of instances and filling the Group by selection options
  $http.get("https:localhost:8080/metering/project/")
    .success(function(response) {
      //alert(JSON.stringify(response[0].instances));
      $scope.groups = response[0].instances;
      $scope.group_by = $scope.groups[0];     
    });

var url = "localhost?" + "meter=" + $scope.metric.label + "&group_by=project" ;
console.log(url);

我想做出如下选择选项...

HTML

<div ng-controller="ceilometerCtrl">
    <select ng-model="metric" ng-options="value.label group by value.group for value in metrics" ng-change="update()">
    </select>
    <select ng-model="group_by" ng-options="value.Id for value in groups" ng-change="update()">
    </select>
</div>

Answer 1

由于您的请求是异步，您必须处理回调以检索某些数据。

在angularJs中， $ http 会返回承诺，因此您可以将它们合并。

此外，您可以使用 $ q 服务，使用 .all（）方法。此方法将promises数组作为参数，并返回一个promise，当参数数组中的promise将被解析为时，将解析该承诺。

$q

此外，如果设置对象的属性，例如 $ scope.metric ，则必须声明，必须定义对象。

<强>控制器

(function(){

function Controller($scope, $http, $q) {

  //Declare metric
  $scope.metric = {};

  var defer = $q.defer();

  var url = '';

  //Declare promise
  var promise1 = $http.get("path_to_url");
  var promise2 = $http.get("another_path");

  //Declare our function callback to launch when promises are finished
  function callback(response){
    //response is an array of promises results, in the same order

    //reponse[0] is the promise1 result
    $scope.metric.name = response[0].data.name;

    //response[1] is the promise2 result
    $scope.group_by = response[1].data.group;

    url = "localhost?" + "meter=" + $scope.metric.name + "&group_by=" + $scope.group_by ;

    //Resolve data with the built url
    defer.resolve(url);
  }

  //When all promise are completed, then call callback function
  $q.all([promise1, promise2]).then(callback);

  //Callback for our resolve result
  function print(url){
    console.log(url);
  }

  //Print data when the url is set
  defer.promise.then(print);


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

Answer 2

您收到错误$scope.metric is undefined，因为当您致电

时

var url = "localhost?" + "meter=" + $scope.metric.label + "&group_by=project";

您正在尝试访问尚不存在的对象上的label。

.success回调中的代码以异步执行，您只会在其回调内收到的结果。如果您修改代码以访问其中的$scope.metrics，您应该可以使用它。

var url = "";

//Fetching the metrics and filling the metric selection options
$http.get("localhost/data/")
    .success(function(response) {
      $scope.metrics = response.nova_meters.concat(response.glance_meters).concat(response.cinder_meters).concat(response.ipmi_meters).concat(response.neutron_meters).concat(response.swift_meters).concat(response.kwapi_meters);
      $scope.metric = $scope.metrics[0];

      // $scope.metric is available here, you can use it 
      url = "localhost?" + "meter=" + $scope.metric.label + "&group_by=project" ;
    });

  //$scope.metric isn't available here (http call hasn't finished yet)
  // will print undefined because it was never assigned to
  console.log($scope.metric);