I have a service that gets data from a server. After retrieving data successfully, I would pass to a $uimodal in a directive. My code is described below
Problem is when I run my app first time, console log shows consequence like
output >> undefined
output >> undefined
output >> [Object, Object]
output >> [Object, Object]
I speculate that is due to a synchronization causing (3) and (4) to happen after (1) and (2). My question is
Thank you
Service
angular.module('myApp')
.service('GeneralHelperService', function($http, $q) {
var model = this;
var uniqueSizes;
model.getSizeList = function() {
var url = 'api/size/' + input;
if (uniqueSizes) return $q.when(uniqueSizes);
return $http.get(url).then(function (data) {
console.log('GeneralHelperService getSize', data.data);
return uniqueSizes = data.data;
})
};
}
Directive
angular.module('myApp')
.directive('aDirective', function ($modal) {
return {
restrict: 'E',
controller: function ($scope) {},
link: function (scope, el, attrs, modal) {
GeneralHelperService.getSizeList().then(function (sizeList) {
scope.sizeList = sizeList;
console.log('debug sizeList inside', JSON.stringify(scope.sizeList));
});
console.log('debug sizeList outside', JSON.stringify(scope.sizeList));
var modalInstance = $modal.open({
template: '<div>{{sizeList}}</div>',
size: 'sm',
controller: 'ControlModal as controlModal',
resolve: {
sizeList: function () {
console.log('resolve', scope.sizeList);
return scope.sizeList;
}
}
});
}
You slightly over complicated your codes, as modal
resolve basically helps to resolve async (promises) before creating modal window, so change your resolve
of $modal.open
to
resolve: {
sizeList: function(GeneralHelperService) {
return GeneralHelperService.getSizeList();
}
}
Then in your controller ControlModal
you should be able to access the return data via sizeList
and don't forget dependency injection sizeList
in your controller.
Btw, just noticed in your $http.get
you return uniqueSizes = data.data;
, make sure you return data.data;
Here is a simple JSFiddle to get the idea
put
var modalInstance = $modal.open({
template: '<div>{{sizeList}}</div>',
size: 'sm',
controller: 'ControlModal as controlModal',
resolve: {
sizeList: function () {
console.log('resolve', scope.sizeList);
return scope.sizeList;
}
}
})
inside .then of asynchronus call. Because its not poosible to put that outside ie parallel to asynchronus call
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.