0

我正在尝试共享一个 $http 请求并返回它的值。但它似乎是“延迟的”并且不会设置值。

对于这个例子，我有 2 个选择框选择汽车。因此，控制器加载cars.json其值被分配给的汽车$scope.cars：

app.controller('MainCtrl', function($scope, $http, LoadCars) {

  LoadCars.async().success(function(data) {
    $scope.cars = data;
    $scope.carA = $scope.carB = data[0];
    $scope.carAChanged();
    $scope.carBChanged();
  });

  $scope.carAChanged = function() {
    $scope.modelsA = $scope.carModels($scope.carA.c);
  }

  $scope.carBChanged = function() {
    $scope.modelsB = $scope.carModels($scope.carB.c);
  }

  $scope.carModels = function(code) {
        var promise = $http.get(code + '.json')
            .success(function(data) {
                //$scope.modelsA = data;
                return data;
            });
        return promise;
    }  
});

HTML：

<fieldset>
  <legend>Choice 1</legend>
  <div><select ng-model="carA" ng-options="c.name for c in cars" ng-change="carAChanged()"></select></div>
  <div><select ng-model="modelA" ng-options="m.c for m in modelsA"></select></div>
</fieldset>

<fieldset>
  <legend>Choice 2</legend>
  <div><select ng-model="carB" ng-options="c.name for c in cars" ng-change="carBChanged()"></select></div>
  <div><select ng-model="modelB" ng-options="m.c for m in modelsB"></select></div>
</fieldset>

Plunker：http ://plnkr.co/edit/5CFFGJ?p=preview

如果我取消注释里面的行$scope.carModels()，$scope.modelsA加载正常。但我希望该值返回，因为我也需要modelsB单独设置。

我究竟做错了什么？实现这一目标的正确方法是什么？

4

1 回答 1

1

更新

根据您的反馈，您似乎正在寻找更像这样的东西（http://plnkr.co/edit/WpCuMA?p=preview）：

<body ng-controller="MainCtrl">
    <car-select ng-model="makes" data-label="Choice One"></car-select>
    <car-select ng-model="makes" data-label="Choice Two"></car-select>
    <car-select ng-model="makes" data-label="Choice Three"></car-select>
    <car-select ng-model="makes" data-label="Choice Four"></car-select>
    <car-select ng-model="makes" data-label="Choice Five"></car-select>
    <car-select ng-model="makes" data-label="Choice Six"></car-select>
</body>

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

app.service('Car', function($http, $q) {
    this.getMakes = function(){
    return $http.get('cars.json');
    }
  this.getModels = function(code){
    return $http.get(code + '.json');
  }
});

app.controller('MainCtrl', function($scope, Car) {
  Car.getMakes().success(function(makes){
    $scope.makes = makes;
  });
});

app.directive('carSelect', function($log, Car){
  return {
    restrict: 'E',
    scope: {
      label: "@label",
      makes: "=ngModel"
    },
    replace: true,
    template: '<fieldset><legend>{{label}}</legend>' +
    '<div><select ng-model="make" ng-options="make.name for make in makes" ng-change="makeChanged(make.c)"></select></div>' +
    '<div><select ng-model="model" ng-options="model.c for model in models"></select></div></fieldset>',
    link: function(scope, elm, attr){
      scope.makeChanged = function(code){
        Car.getModels(code).success(function(models){
          scope.models = models;
        });
      }
    }
  }
});

老办法...

http://plnkr.co/edit/wg01Wt?p=preview

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

app.service('Cars', function($http, $q) {
    this.getMakes = function() {
        return $http.get('cars.json');
    }
    this.getModels = function(code) {
        return $http.get(code + '.json');
    }
});

app.controller('MainCtrl', function($scope, Cars) {

    Cars.getMakes().success(function(makes) {
        $scope.cars = makes;
    });

    $scope.carAChanged = function() {
        Cars.getModels($scope.carA.c).success(function(cars) {
            $scope.modelsA = cars;
        });
    }

    $scope.carBChanged = function() {
        Cars.getModels($scope.carB.c).success(function(cars) {
            $scope.modelsB = cars;
        });
    }
});
于 2013-07-02T03:43:18.207 回答