-
-
Save zachlysobey/d8edfdb73382314b6dd5 to your computer and use it in GitHub Desktop.
(function() { | |
'use strict'; | |
angular | |
.module('dkProject.quota') | |
.factory('sourceListModal', sourceListModal); | |
const modalTemplate = ` | |
<div class="source-list-modal"> | |
<div class="modal-header"> | |
<h3 class="modal-title"> | |
My Modal Title | |
</h3> | |
<div class="controls"> | |
<button class="btn btn-primary" type="button" ng-click="save()">Save</button> | |
</div> | |
</div> | |
<div class="modal-body"> | |
<my-directive | |
some-data="syncData" | |
more-data="asyncData"> | |
</my-directive> | |
</div> | |
</div> | |
`; | |
/* @ngInject */ | |
function sourceListModal($uibModal, someWebServices) { | |
var service = { | |
open: open | |
}; | |
return service; | |
//////////////// | |
function open(syncData) { | |
const modalInstance = $uibModal.open({ | |
animation: true, | |
template: modalTemplate, | |
controller: ModalInstanceController, | |
resolve: { | |
syncData: () => syncData, | |
asyncData: () => someWebServices.getAsyncData() | |
} | |
}); | |
return modalInstance; | |
} | |
} | |
/* @ngInject */ | |
function ModalInstanceController($scope, $uibModalInstance, syncData, asyncData) { | |
$scope.asyncData = asyncData; | |
$scope.moreData = syncData; | |
$scope.save = function() { | |
$uibModalInstance.close($scope.theThingIWantToSave); | |
}; | |
$scope.cancel = function() { | |
$uibModalInstance.dismiss('cancel'); | |
}; | |
} | |
})(); |
var changePassmodalInstance = $uibModal.open(
{
templateUrl: 'views/modals/changepassword.html',
animation: true,
windowClass:'loginmodel1',
controller:'LoginController'
});
Hello, can you show how you would handle an error in one of the resolve calls in the example? e.g. if the asyncData call returned an http error.
In a similar scenario with ui-router a state change error is raised which you can intercept and redirect to an error page but with a modal I am not sure what to look for. The behavior I see is that the modal is not displayed if a resolve call fails which is as I would expect, i just can't react to it so i can feedback to the user.
Hi, never mind, having read the documentation properly! the $uibModal.open() call returns a promise 'opened' which will be rejected if any of the resolve cases fail e.g.
$uibModal.open({
animation: true,
template: modalTemplate,
controller: ModalInstanceController,
resolve: {
syncData: () => syncData,
asyncData: () => someWebServices.getAsyncData()
}
}).opened.then(
function (success) {},
function (error) {
console.log('ui failed to open, reason : ', error);
}
);
This way you can detect a resolve error and present the details to the user.
This code doesn't work :(
asyncData: () => someWebServices.getAsyncData() gives error:
JS_Parse_Error
"Unexpected token: punc ())"
is it possible put the modal template in another file and call it using templateUrl attribute? i am trying to do that
$scope.popupModal=function(){ $uibModal.open({ templateUrl:"comments/modal.tpl.html", scope:$scope, }) }
but not getting the modal popup.
in the xhr window, angular first sends request for custom template and receives it with a 302 status. The next xhr request goes to uib/templates/modal/windows.html which is also returning 302 status.