2016-01-20 64 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

相关问题