Question

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

对于这个例子，我有两个选择的汽车选择框。因此，控制器从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。

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

Answer 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;
        });
    }
});

共享$ http函数和返回值

1 个答案: