Angularjs 向同一控制器注入不同的数据

我有一个控制器，通过管理不同的数据，它将具有与其他控制器相同的功能。我是angularJS的新手，所以我不确定该如何继续。我读过关于服务和工厂的文章，但只看到了在不同控制器之间注入相同数据而不是将不同数据注入同一控制器的示例。任何能为我指明正确方向的帮助都将不胜感激

angular.module("myApp")
   .controller("AirlineController", function () {
       this.Airlines = getAirlines(); //some service call that will be ajax eventually      
   });

angular.module("myApp")
   .controller("CitiesController", function () {
       this.Cities = getCities();//some service call that will be ajax eventually
   });

angular.module("myApp")
   .controller("GenericController", function () {
       $('.selected-items-box').bind('click', function (e) {
           e.stopPropagation();
           $('.image-select-wrapper .list').toggle('slideDown');
       });

       $(document).bind('click', function () {
           $('.image-select-wrapper .list').slideUp();
       });

       this.ListObject = getAirlines();//this list should be populated from one of the other controllers

       this.toggleSelected = function (selectedItem) {
           angular.forEach(this.ListObject, function (ListItem) {
               ListItem == selectedItem ? ListItem.selected = true : ListItem.selected = false;
           });
       };

       this.getSelectedItem = function (item) {
           return item.selected;
       };
   });

---

你当然可以做到这一点。您可以拥有一个工厂/服务，该工厂/服务具有可以从控制器传递的参数的方法。例如，我有两个控制器和一个服务，这两个控制器都在调用

根据传递的参数值，服务将返回不同的数据集。我使用的是$scope，但是你可以使用它，但是想法还是一样的

angular.module('SelectOptionModule')
    .controller('AirlineController', function ($scope, AirlineService) {
        $scope.Airline = AirlineService.GetAirLines("a")
    });

angular.module('SelectOptionModule')
    .controller('Airline2Controller', function ($scope, AirlineService) {
        $scope.Airline = AirlineService.GetAirLines("b")
    });

angular.module('SelectOptionModule')
    .factory('AirlineService', AirlineService);

function AirlineService() {
    function GetAirLines(value) {
        if (value == "a")
        {
            return [{ "Id" : "1", "Name" : "AA" } ]
        }

        if (value == "b") {
            return [{ "Id": "2", "Name": "Delta" }]
        }
    }

    return {
        GetAirLines: GetAirLines
    };
}

视图可以像这样来测试这一点

<div ng-app='SelectOptionModule' >
    <div ng-controller="AirlineController">
        {{ Airline }}
    </div>
    <div ng-controller="Airline2Controller">
        {{ Airline }}
    </div>
</div>

{{航空公司}
{{航空公司}

你当然可以做到这一点。您可以拥有一个工厂/服务，该工厂/服务具有可以从控制器传递的参数的方法。例如，我有两个控制器和一个服务，这两个控制器都在调用

根据传递的参数值，服务将返回不同的数据集。我使用的是$scope，但是你可以使用它，但是想法还是一样的

angular.module('SelectOptionModule')
    .controller('AirlineController', function ($scope, AirlineService) {
        $scope.Airline = AirlineService.GetAirLines("a")
    });

angular.module('SelectOptionModule')
    .controller('Airline2Controller', function ($scope, AirlineService) {
        $scope.Airline = AirlineService.GetAirLines("b")
    });

angular.module('SelectOptionModule')
    .factory('AirlineService', AirlineService);

function AirlineService() {
    function GetAirLines(value) {
        if (value == "a")
        {
            return [{ "Id" : "1", "Name" : "AA" } ]
        }

        if (value == "b") {
            return [{ "Id": "2", "Name": "Delta" }]
        }
    }

    return {
        GetAirLines: GetAirLines
    };
}

视图可以像这样来测试这一点

<div ng-app='SelectOptionModule' >
    <div ng-controller="AirlineController">
        {{ Airline }}
    </div>
    <div ng-controller="Airline2Controller">
        {{ Airline }}
    </div>
</div>

{{航空公司}
{{航空公司}

使用功能参数使工厂更加通用

app.factory("getGeneric", function($http) {
    var apiUrl = "http:/my.com/api/"
    //Use function parameter
    return function (arg1) {
        //return promise
        return $http.get(apiUrl + arg1);
    }
});

然后在你的控制器里

app.controller("AirlineController", function (getGeneric) {
     var vm = this;

     //use function parameter
     var airlinesPromise = getGeneric("Airlines"); //service returns promise

     airlinesPromise.then( function onFulfilled(response) {
         vm.Airlines = response.data;
     });     
});

app.controller("CitiesController", function (getGeneric) {
     var vm = this;

     //use function parameter
     var citiesPromise = getGeneric("Cities"); //service returns promise

     citiesPromise.then( function onFulfilled(response) {
         vm.Cities = response.data;
     });
});

请注意，大多数服务API是异步的，不会立即返回数据。AngularJS

$http

服务返回承诺，需要使用其

方法从承诺中提取数据

另一点是使工厂通用化并使控制器精简和具体化。控制器应精简，并针对其HTML。使用功能参数使工厂更加通用

app.factory("getGeneric", function($http) {
    var apiUrl = "http:/my.com/api/"
    //Use function parameter
    return function (arg1) {
        //return promise
        return $http.get(apiUrl + arg1);
    }
});

然后在你的控制器里

app.controller("AirlineController", function (getGeneric) {
     var vm = this;

     //use function parameter
     var airlinesPromise = getGeneric("Airlines"); //service returns promise

     airlinesPromise.then( function onFulfilled(response) {
         vm.Airlines = response.data;
     });     
});

app.controller("CitiesController", function (getGeneric) {
     var vm = this;

     //use function parameter
     var citiesPromise = getGeneric("Cities"); //service returns promise

     citiesPromise.then( function onFulfilled(response) {
         vm.Cities = response.data;
     });
});

请注意，大多数服务API是异步的，不会立即返回数据。AngularJS
$http
服务返回承诺，需要使用其
方法从承诺中提取数据

另一点是使工厂通用化并使控制器精简和具体化。控制器应精简且特定于其HTML。
为什么不使用
.factory
，它将返回您的数据，然后在控制器中调用。据我所知，如果我使用工厂，我必须声明控制器中预期的数据，这意味着它仍然是硬编码的，不允许在GenericController中使用动态数据。如果不是这样我为我的无知道歉，正如我所提到的，我是angular的新手。这里，如果你想要数据动态数据，你会在你的工厂得到数据，然后返回，通过调用控制器，你可以使用它。你是说，工厂将能够检索航空公司和排队的城市，并在我需要的时候发送给控制器？如果你想要的话然后，我可以与您分享一个
.factory
示例，了解如何使用它为什么不使用
.factory
，它将返回您的数据，然后在您的控制器中调用。据我所知，如果我使用工厂，我必须声明控制器中预期的数据，这意味着它仍然是硬编码的，不允许在GenericController中使用动态数据。如果不是这样我为我的无知道歉，正如我所提到的，我是angular的新手。这里，如果你想要数据动态数据，你会在你的工厂得到数据，然后返回，通过调用控制器，你可以使用它。你是说，工厂将能够检索航空公司和排队的城市，并在我需要的时候发送给控制器？如果你想要的话然后，我可以与您分享一个
.factory
示例，其中有一个关于如何使用iThanks进行响应的小想法，我将尝试它，看看它如何运行感谢响应，我将尝试它，看看它如何运行感谢响应，我将尝试它，看看它如何运行感谢响应，我将尝试它，看看它如何运行