Creating a modal dialog

For the MCA directive, I wanted to use a modal dialog for creating and editing MCA criteria. As always, in the end it turned out to be quite easy, so please follow along.

1. Create a new HTML page for the dialog: the HTML page's filename should end with tpl.html, as this will trigger gulp to convert it to a typescript page.

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title" translate>MCA.EDITOR_TITLE</h3>
        </div>
        <div class="modal-body">
        ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" data-ng-click="vm.cancel()" translate>CANCEL_BTN</button>
            <button type="button" class="btn btn-primary" data-ng-click="vm.save()" translate>OK_BTN</button>
        </div>
    </div>

2. Include the generated .ts file (in the same folder) in your project, so the compiler will include the template too, e.g. McaEditorView.tpl.html is converted to McaEditorView.tpl.ts.

3. Add the generated template to the Angular's $templateCache service, so we can later reference it by id. For example:

    myModule.directive('mca', ['$window', '$compile', '$templateCache', 
            function ($window, $compile, $templateCache): ng.IDirective {
                return { 
                    compile: el => { // I need to explicitly compile it in order to use interpolation like {{xxx}}
                        $templateCache.put('mcaEditorView.html', McaEditorView.html); ...

4. Create a controller class for this modal dialog, e.g. McaEditorCtrl, and inject the $modalInstance (see 5 below) into the controller, as well as any inputs that you may want to offer, e.g. an MCA object. For example,

        public static $inject = [
            '$scope',
            '$modalInstance',
            'mca'
        ];

        constructor(
            private $scope           : IMcaEditorScope,
            private $modalInstance   : any,
            private mca?             : Models.Mca

To close the modal dialog, either use '$modalInstance.dismiss('cancel');' or 'this.$modalInstance.close(mca);', returning the newly created MCA model.

5. Finally, create the dialog using the $modal service (that is injected into your controller as type any). For more information about this poorly documented service, see here.

        private showMcaEditor(newMca: Models.Mca): void {
            var modalInstance = this.$modal.open({
                templateUrl: 'mcaEditorView.html',        // YOUR TEMPLATE ID
                controller: McaEditorCtrl,                // YOUR CONTROLLER
                resolve: {
                    mca: () => newMca                     // THE ITEMS YOU WANT TO INJECT INTO THE CONTROLLER
                }
            });
            modalInstance.result.then((mca: Models.Mca) => {  // THE ITEMS YOU GET BACK FROM THE MODAL DIALOG
                this.addMca(mca);
                console.log(JSON.stringify(mca, null, 2));
            }, () => {
                console.log('Modal dismissed at: ' + new Date());
            });
        }