页面和页面之间不共享数据;模式弹出窗口(控制器之间)AngularJs
我无法在我的页面和模式弹出窗口之间共享数据。 确切要求。 我正在通过模式弹出页面上的服务加载数据。当模式关闭时,此模式弹出窗口上的选定数据应显示在页面上。虽然数据被推送,但它始终返回空值 代码如下页面和页面之间不共享数据;模式弹出窗口(控制器之间)AngularJs,angularjs,service,controller,Angularjs,Service,Controller,我无法在我的页面和模式弹出窗口之间共享数据。 确切要求。 我正在通过模式弹出页面上的服务加载数据。当模式关闭时,此模式弹出窗口上的选定数据应显示在页面上。虽然数据被推送,但它始终返回空值 代码如下 (function(){ 'use strict'; angular.module('sspUiApp.controllers') .service('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {
(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>
{{frmt.name}
{{frmt.size}
和默认页面
<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>
{{frmt.name}
{{frmt.type}
{{frmt.floor_price}}
{{frmt.size}
谢谢。尝试使用工厂而不是服务
angular.module('sspUiApp.controllers')
.factory('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {
现在您有两个不同的服务实例。当您注入服务依赖项时,它会创建一个新的服务实例。另一方面,工厂在注入时使用相同的实例。这样,您应该能够在两个控制器之间共享数据
服务
将serviceName声明为可注入参数时,将为您提供函数的实例。换句话说,您通过的新函数为service()
工厂
将factoryName声明为可注入参数时,将向您提供通过调用传递给module.factory的函数引用返回的值
阅读更多: