Question

我有一个控制器，通过管理不同的数据，与另一个控制器具有相同的功能。我是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;
       };
   });

Answer 1

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

根据传递的参数值，服务将返回不同的数据集。我使用的是$ 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
    };
}

View可以像测试一样。

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

Answer 2

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

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

请注意，大多数servive API都是异步的，不会立即返回数据。 AngularJS $http服务返回promises，需要使用.then方法从promise中提取数据。

另一点是使工厂成为通用并使控制器精简且具体。控制器应该精简并且特定于HTML。

将不同的数据注入同一个控制器

2 个答案: