Question

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

代码如下。

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

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

尝试使用工厂代替服务。

document.getElementById("myButton").onclick = function (){ alert('Hi!') }; 
//a function is defined/declared which will be executed when the onclick action is performed

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

服务   将serviceName声明为可注入参数时，将为您提供该函数的实例。换句话说angular.module('sspUiApp.controllers') .factory('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {。

工厂   将factoryName声明为injectable参数时，将为您提供通过调用传递给module.factory的函数引用返回的值。

了解详情：AngularJS: Service vs provider vs factory

页面和页面之间不共享数据模态弹出（控制器之间）AngularJs

1 个答案: