2016-01-20 65 views
0

我無法在我的頁面模式彈出窗口之間共享數據。 準確的要求。 我正在通過我的模態彈出頁面上的服務加載數據。當Modal關閉時,此Modal Popup上的選定數據應顯示在Page上。儘管數據被推送,它總是返回空白值。頁面和模態彈出窗口之間沒有數據共享(在控制器之間)AngularJs

代碼如下。

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

我的兩個控制器

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

我的模態HTML頁面

<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/{{ 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> 

和默認頁

<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/{{ 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> 

感謝。

回答

0

嘗試使用工廠而不是服務。

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

現在你有服務的2個不同的實例。當你注入服務依賴時,它會創建一個新的服務實例。另一方面,工廠在注入時使用相同的實例。這樣你應該可以在2個控制器之間共享你的數據。

服務 在聲明服務名,你將提供的功能的一個實例可注射的說法。換句話說,new FunctionYouPassedToService()

工廠 將factoryName聲明爲注入參數時,將提供通過調用傳遞給module.factory的函數引用返回的值。

瞭解更多:AngularJS: Service vs provider vs factory

相關問題