Looking to attach a listener to an element within a modal once it has finished rendering?

Question

Looking to attach a listener to an element within a modal once it has finished rendering?

Upon clicking a button, a modal window appears. The controller assigned to the modal contains a list of element IDs that need listeners assigned. However, when the controller initializes, the modal has not yet rendered, causing the elements requiring listeners to be nonexistent at that time. I am currently exploring how to assign listeners to these elements after the modal has been displayed.

The code responsible for creating the modal is as follows:

ModalDialogFactory.showDialog(dialogOptions);

And inside the factory:

        showDialog: function (modalOptions) {
            var modalConfig = {};
            angular.extend(modalConfig, modalDialogDefaults, modalOptions);
            modalInstance = $modal.open(modalConfig);
            modalInstance.opened.then(function() {
                // Possibly in this section
            })
            return modalInstance.result;
        }

Is there a method to access the controller functions of modalInstance after the modal has been displayed?

javascript angularjs bootstrap-modal

Answer 1

Answer №1

To initialize the modal, you can utilize ng-init:

Within the modal's HTML file:

<span ng-init="vm.start()"></span>
<input ng-model="vm.data" type="text">

Inside the modal's controller:

vm.data = "initial value";

function start() {
     $scope.$watch('vm.data', function(newVal, oldVal){
          console.log("The value has been updated to: "+newVal);
          vm.data.watch = newVal;
     });
}

Answer 2

To initialize the modal, you can utilize ng-init:

Within the modal's HTML file:

<span ng-init="vm.start()"></span>
<input ng-model="vm.data" type="text">

Inside the modal's controller:

vm.data = "initial value";

function start() {
     $scope.$watch('vm.data', function(newVal, oldVal){
          console.log("The value has been updated to: "+newVal);
          vm.data.watch = newVal;
     });
}

Looking to attach a listener to an element within a modal once it has finished rendering?

Answer №1

Similar questions

InvalidSelectorError: The specified selector is not valid //button[contains(., 'buttonText')] while running JavaScript code

Adding a class to the following DIV and smoothly transitioning the current one out can be achieved using a dynamic number of items in multiple instances

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

Exploring Angular 10's advanced forms: delving into three levels of nested form groups combined with

Can one track the moment when a user clicks on an advertisement within a YouTube video?

Resolve the conflict with the upstream dependency when installing NPM packages

The sender parameter in runtime.onMessage does not include the tab information

Running of code in <script> tag

Having trouble with the click button flip function? It seems to be working in one section but not in

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Deferred computed property fails to recognize the final character entered into the input field

What steps are necessary to modify my AngularJS routes to a file?param1=a&param2=b structure?

Using Angular Material for creating tabs with identical content

What causes the Woocommerce checkout button to be blocked on the checkout page?

The focus is being lost on the ng-model when used within an ng-repeat

Concealing specific sections of HTML content in a webview on the fly

I encountered an issue while operating my next.js application which utilizes solidity smart contracts. The error message "Cannot read properties of undefined" was displayed during the process

Preventing Context Menu from Appearing on Long Click in HTML5 Games

What are the essential files needed in Kendo UI Core for a mobile app?

Am I implementing the Vue.JS onChange function correctly?