Last active
May 29, 2018 12:07
-
-
Save zachlysobey/d8edfdb73382314b6dd5 to your computer and use it in GitHub Desktop.
UIB Modal Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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'); | |
| }; | |
| } | |
| })(); |
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
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.