页面和模态弹出窗口之间不共享数据(控制器之间)AngularJ

Question

我无法在我的页面和模式弹出窗口之间共享数据。确切的要求。我正在通过我的模式弹出页面上的服务加载数据。当Modal关闭时，此Modal弹出窗口上的选定数据应显示在页面上。尽管数据被推送，但它始终返回空值。

代码如下所示。

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

我的Modal 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>

谢谢。

Answer 1

尝试使用工厂而不是服务。

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

现在你有两个不同的服务实例。当您注入服务依赖项时，它会创建一个新的服务实例。另一方面，工厂在被注入时使用相同的实例。这样你就可以在2个控制器之间共享你的数据。

服务当将serviceName声明为可注入参数时，您将获得该函数的一个实例。换句话说，new FunctionYouPassedToService()。

工厂当将factoryName声明为可注入参数时，您将获得通过调用传递给module.factory的函数引用返回的值。

阅读更多：AngularJS: Service vs provider vs factory