Как я могу получить доступ к методу контроллера на контроллере модального экземпляра на AngularJS?

Question

Можете ли вы помочь мне с этим? Я пытаюсь получить доступ к функции на моем родительском / главном контроллере из шаблона, созданного на модальном экземпляре, но я не могу получить к нему доступ напрямую. ты можешь помочь мне с этим? Вот мой код:

Вот функция для доступа и отображения модальных:

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

Это вызвано этой функцией, и я прикрепил это событие к кнопке

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>

Теперь вот часть, где я вызываю функцию на моем родительском / главном контроллере.

<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>

Я вызываю функцию getSelectedQuestionType в событии onchange. Но результат на консоли undefined.

Можете ли вы помочь мне с этим?

Answer 1

Вы можете передать ссылку на функцию через блок resolve и затем получить к ней доступ в вашем модальном контроллере, например:

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;
    }

    ...
});

Надеюсь, это поможет:)