共享$ http函數並返回值

我試圖共享一個$ http請求並返回它的值。但它似乎是'延期'，並不會設定價值。

對於這個例子，我有2選擇框的汽車選擇。

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負載所以控制器從cars.json，其價值被分配到$scope.cars裝載車很好。但我希望價值迴歸，因爲我需要單獨設置modelsB。

我在做什麼錯？什麼是實現這一目標的正確方法？

來源

2013-07-02 jzm

更新

根據大家的反饋，它看起來好像你正在尋找的東西多一點這樣的（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-02 03:43:18

這與我原來的相似。但我想有一種方法可以避免兩次寫同一個$ http語句。 – jzm

我正在研究可能有所幫助的更新服務。 1秒。 –

我更新了一點服務，但你真正需要的是一個下拉指令。 –

共享$ http函數並返回值

回答

相關問題