Skip to content

Instantly share code, notes, and snippets.

@zachlysobey
Last active May 29, 2018 12:07
Show Gist options
  • Select an option

  • Save zachlysobey/d8edfdb73382314b6dd5 to your computer and use it in GitHub Desktop.

Select an option

Save zachlysobey/d8edfdb73382314b6dd5 to your computer and use it in GitHub Desktop.
UIB Modal Example
(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');
};
}
})();
@garycuthbert
Copy link

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.

@robeverett
Copy link

This code doesn't work :(

asyncData: () => someWebServices.getAsyncData() gives error:

JS_Parse_Error
"Unexpected token: punc ())"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment