Passing function to angular js component

Question

I have a component (parent component) in which I display a modal using:

showModal() {
    this.modalInstance = this.modal.open({
        template: "<upload-modal on-close='$ctrl.closeModal()'></upload-modal>"
    });
}

This is the code for upload component (child component):

import uploadController from "./upload.controller";
export const UPLOAD_COMPONENT_NAME = "uploadModal";

export const uploadComponent = {
   templateUrl: "templates/profile/upload-image.html",
   controller: uploadController,
   bindings: {
    'onClose': "&"
   }
};

This is how I invoke onClose function (upload-image.html):

 <div class="modal-content">
<form id="addReview" name="addReview" role="form" class="form-horizontal">
    <div class="modal-header">
        <button type="button" ng-click="$ctrl.onClose()" class="close"><span
                aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 id="myModalLabel" class="modal-title">Upload your profile image</h4>
    </div>
    <div class="modal-body">
        <input id="input-id" type="file" class="file" data-preview-file-type="image">
    </div>
    <div class="modal-footer">
        <button ng-click="$ctrl.onClose()" type="button" class="btn btn-default">
            Cancel
        </button>
        <button type="submit" class="btn btn-primary">Update</button>
    </div>
</form>

However, the function closeModal in the parent component never gets called. What am I doing wrong here?

Answer 1

You need to pass the function to the component, not it's invocation

change:

template: "<upload-modal on-close='$ctrl.closeModal()'></upload-modal>"

into this:

template: "<upload-modal on-close='$ctrl.closeModal'></upload-modal>"

It would also help if you'll post the controller code to see if you're calling this function properly. Should be something like this

if ($ctrl.closeModal && angular.isFunction($ctrl.closeModal()) {
    $ctrl.closeModal()(anyValueYouWantToPass);
}

P.S

ui-bootstrap modals already returns lifecycle callbacks as promises, the open method returns the modal object, one of it's properties is

closed (Type: promise) - Is resolved when a modal is closed and the animation completes.