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

Question

我正在为$ http.get方法使用angularjs代码，但是当我尝试访问$ scope.metric.label时。 它给错误，如"Error: $scope.metric is undefined 。没有定义，我想创建从选择选项的动态URL，但我不能够创建动态的URL。

演示 http://plnkr.co/edit/UrufgAUqjT8GOLz7QVsL?p=preview
在演示取消注释警报（URL）中，您将看到它不起作用

//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返回一个promise ，因此您可以将它们组合在一起。

同样，您可以通过$ .all（）方法使用$ q服务。 此方法将一个promise数组作为参数，并返回一个promise，当将参数数组中的promise解析为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回调内的代码是异步执行的，您只会在其callback内收到结果。 如果修改代码以访问其中的$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);