i dati non vengono condivisi tra Pagina e Modal Popup (tra controller) AngularJs - angularjs, service, controller

Non sono in grado di condividere dati tra la mia pagina ePopup modale. Esatto requisito. Sto caricando i dati tramite i servizi nella mia pagina popup modale e i dati selezionati su questo popup modale dovrebbero essere visualizzati sulla pagina quando Modal è chiuso, ma restituiscono sempre il valore vuoto anche se i dati vengono inviati.

Il codice è come di seguito.

(function(){
"use strict";
angular.module("sspUiApp.controllers")
.service("AdUnitService", ["$http", "API_URL", function($http, API_URL) {
var allAdFormats = [];
var selectedAdFormats = [];

$http.get( API_URL + "/ssp/adformat/all")
.then(function onSuccess(response) {
allAdFormats = response.data;
},
function onError(response) {
allAdFormats = [];
});

return {
setSelectedFormats: function(item) {
selectedAdFormats.push(item);
},
getSelectedAdFormats: function() {
return selectedAdFormats;
},
getAdFormats: function() {
return allAdFormats;
}
};
}]);
})();

My Both Controller

(function(){
"use strict";
angular.module("sspUiApp.controllers")
.controller("AdUnitFormatCtrl", function ($scope, $http, $state, AdUnitService) {
$scope.selectedAdUnit = AdUnitService.getSelectedAdFormats();
})
.controller("ModalDemoCtrl", function ($scope, $http, $state, AdUnitService, $uibModal) {
$scope.allAdFormats = AdUnitService.getAdFormats();
$scope.open = function (size) {
$scope.$modalInstance = $uibModal.open({
scope: $scope,
templateUrl: "views/select_ad_format.html",
size: size,
});
};
$scope.cancel = function () {
$scope.$modalInstance.dismiss("cancel");
};
$scope.add = function (value) {
AdUnitService.setSelectedFormats(value);
};
});
})();

My Modal Html Page

<div class="ad-format-section" ng-controller="ModalDemoCtrl">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-2 col-xs-6 selectedAdFormatData" ng-repeat="frmt in allAdFormats.adformat">
<div ng-click="add(frmt)">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<img ng-src="/images/../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12  text-center">
<span class="formatName">{{ frmt.name }}</span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12  text-center">
<span class="resSize">{{ frmt.size }}</span>
</div>
</div>
</div>
</div>
</div>
</div>

E pagina predefinita

<div class="ad-units-section" ng-controller="AdUnitFormatCtrl">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 selectedAdUnitsData" ng-repeat="frmt in selectedAdUnit.adformat">
<div class="col-lg-1 col-md-1 col sm-6 col-xs-12 nopadding"><img ng-src="/images/../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/></div>
<div class="nopadding-left col-lg-3 col-md-3 col sm-6 col-xs-12"><span class="formatName">{{ frmt.name }}</span></div>
<div class="col-lg-2 col-md-1 col sm-6 col-xs-12  nopadding-right">
<span class="adType">{{ frmt.type }}</span>
</div>
<div class="col-lg-3 col-md-2 col sm-6 col-xs-12 nopadding">
<span class="floorPrice">{{ frmt.floor_price }}</span>
</div>
<div class="col-lg-1 col-md-5 col sm-6 col-xs-12 nopadding">
<span class="resSize">{{ frmt.size }}</span>
</div>
<div class="col-lg-2 col-md-5 col sm-6 col-xs-12 text-right nopadding">
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting watchAd"></span>
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting settingAd"></span>
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting deleteAd"></span>
</div>
</div>
</div>
</div>

Grazie.

risposte:

Prova a utilizzare la fabbrica anziché il servizio.

angular.module("sspUiApp.controllers")
.factory("AdUnitService", ["$http", "API_URL", function($http, API_URL) {

In questo momento hai 2 diverse istanze delservizio. Quando si inietta la dipendenza dal servizio, viene creata una nuova istanza del servizio. D'altra parte le fabbriche creano la stessa istanza quando vengono iniettate. In questo modo dovresti essere in grado di condividere i tuoi dati tra 2 controller.

Servizi Quando dichiari serviceName come argomento iniettabile ti verrà fornita un'istanza della funzione. In altre parole new FunctionYouPassedToService().

fabbriche Quando si dichiara factoryName come argomento iniettabile, verrà fornito il valore che viene restituito richiamando il riferimento alla funzione passato a module.factory.

Leggi di più: AngularJS: Service vs provider vs factory