How can I access controller method on a modal instance controller on AngularJS?

Question

Can you help me with this? I am trying to access the function on my parent/main controller from the template created on the modal instance but I couldn't access it directly. Can you help me with this? Here's my code:

Here's the function for accessing and showing the modal:

openQuestionModalForm() {
    let ctrl = this;
    var modalInstance = ctrl.$modal.open({
        templateUrl: 'questionModal.tmpl.html',
        scope: this.$scope,
        controller: ['$modalInstance', function($modalInstance) {

            this.parentController = ctrl;

            this.modalOptions = {
                mode: 'add',
                actionType: 'add'
            }

            console.log(this.Questionnaire_formController);

            //this.modalOptions.data = angular.copy(data);
            // this.modalOptions = {
            //     mode: mode,
            //     id: id,
            //     data: angular.copy(data),
            //     actionType: mode //set to mode temporarily should be ActionType
            // }
            this.close = $modalInstance.close;
        }],
        size: 'small',
        controllerAs: '$ctrl',
        windowClass: 'addeditcourseware-modal'
    });
    modalInstance.result.then(function(result) {
        try {
            console.log('*-----*', result);
        } catch(e) { 
            console.log('Error!'); 
        }
    })
}

This is triggered by this function and I attached this event on a button

openAddEditCoursewareModal(mode, id, data, actionType) {

    let ctrl = this;
    if(ctrl.QuestionsStore.questionnaireType == 'Questionnaire') {

        this.openQuestionModalForm(); //shows my modal based on the condition

....

<div class="row">
    <div class="columns title-box move-right">
        <p class="title">Questions</p>
        <div class="button_link">
            <button class="button-primary button-default" ng-click="$ctrl.openAddEditCoursewareModal('add')">Add Question</button>
        </div>
    </div>
</div>

Now here's the part where I am calling the function on my parent/main controller.

<label class="stacked">
    Question Type:
    <select name="question_type" class="form-field" id="questionType" ng-model="$ctrl.questionModal.data.attributes.question_type" ng-change="$ctrl.getSelectedQuestionType()" ng-required="true">
        <option value="single">Single</option>
        <option value="multiple">Multiple</option>
        <option value="true_or_false">True or False</option>
        <option value="free_text">Free Text</option>
    </select> 
</label>

I am calling the function getSelectedQuestionType on the onchange event. But the result on the console is undefined.

Can you help me with this?

use a 'scope': { myFunction: '&myFunction' } in your directive, and in the view binded to the controller, add the attribute ``data-my-function="openAddEditCoursewareModal($param1, $param2)". Inside the directive template of your modal, to call the function use myFunction({ $param1: somevalue, $param2: somevalue2 })` — anotherdev
– anotherdev, Commented Jan 24, 2019 at 10:18
Another way is to use $rootScope.broadcast('call_my_fn', data) in the modal, and use $scope.$on('call_my_fn') in the controller to call your function. Less modular — anotherdev
– anotherdev, Commented Jan 24, 2019 at 10:19
hi @PierreEmmanuelLallemant thanks for the response but I couldn't understand fully your explanation. I am still learning AngularJS for now. Can you provide me an example or some code how can I do this approach? — rochellecanale
– rochellecanale, Commented Jan 24, 2019 at 10:22
for broadcast: toddmotto.com/… . Yes add '$rootScope' in the array and '$rootScope` in the function paramater — anotherdev
– anotherdev, Commented Jan 24, 2019 at 10:26
thinkster.io/egghead/isolate-scope-am for directive version with & scope binding — anotherdev
– anotherdev, Commented Jan 24, 2019 at 10:28

Protozoid · Accepted Answer · 2019-01-24 11:17:17Z

1

You could pass the function reference through a resolve block and then access it in your modal controller, as such:

modalInstance = ctrl.$modal.open({
    ...

    resolve: {
        'getSelectedQuestionType': function () {
            return ctrl.getSelectedQuestionType;
        }
    },
    controller: ['$modalInstance', 'getSelectedQuestionType', function($modalInstance, getSelectedQuestionType) {
        // Bind to controller so that you can call it via $ctrl.getSelectedQuestionType in your view
        this.getSelectedQuestionType = getSelectedQuestionType;
    }

    ...
});

Hope this helps :)

answered Jan 24, 2019 at 11:17

Protozoid

1,2071 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I access controller method on a modal instance controller on AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related