UIB Modal Example

uibModalExample.js

(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');
        };
    }
})();

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.

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 ())"