注入不同的数据到相同的控制器

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

来源

2016-03-03 aemorales1

为什么你不使用'.factory'来返回你的数据，然后从我的理解中调用你的控制器 –

如果我使用工厂，我必须声明控制器中的数据，这意味着它是仍然硬编码，并且不允许在GenericController中使用动态数据。如果不是这种情况，我为我的无知道歉，正如我所提到的，我是新角色。 – aemorales1

这里如果你想要数据动态数据，那么你会得到你的工厂数据，然后返回它，并通过在控制器中调用它可以使用它 –

使用函数参数使工厂更通用。

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服务返回承诺，数据需要通过其.then方法从承诺中提取。

另一点是使工厂通用并使控制器精益和特定。控制器应该是精简而且特定于其HTML。

来源

2016-03-03 18:59:27 georgeawg

感谢您的回应，我会尝试它并看看它如何去 – aemorales1

这做了我所需要的，谢谢 – aemorales1

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

根据传递的参数值，服务将返回不同的数据集。我使用$范围，但你可以使用这个，但这个想法保持不变。

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>

来源

2016-03-03 18:44:00

感谢您的回应，我会尝试一下，看看它是怎么回事 – aemorales1

注入不同的数据到相同的控制器

回答

相关问题