Send the form data from a modal controller in AngularJS to an ng-controller outside of the modal

There seems to be a confusion with the functionality not working as expected:

In my Angular application, I have a main page with an ng-controller named "SearchCtrl" that handles sending search requests to a webserver.

app.controller('SearchCtrl', ['$http','$scope', function($http,$scope) {

$scope.doAlert = function() {
    console.log('search page alert inside searchresultsctrl');
}

This SearchCtrl is utilized on my search page and further down the page, there is another controller called SearchSortModalCtrl which triggers a modal for user interactions:

app.controller('SearchSortModalCtrl', function ($scope, $modal, $log) {
.....

var modalInstance = $modal.open({
        templateUrl: '/modal-search-sort.html',
        controller: 'SearchSortFormCtrl',
        size: size,
        resolve: {
            items: function () {
              return $scope.items;
            }
        }
    });

This connects to the SearchSortFormCtrl which has:

app.controller('SearchSortFormCtrl', ['$http','$scope','$rootScope','$modalInstance', function($http,$scope,$rootScope,$modalInstance) {

    $scope.cancel = function () {
        $modalInstance.dismiss();
    };

    $scope.doAlert2 = function() {
        console.log('search page alert test2');
    }

The goal is to trigger an action on SearchCtrl when submitting a form within the modal window. However, using ng-submit="doAlert()" does not work as intended. Changing it to doAlert2() functions correctly in SearchSortFormCtrl. Even attempting ng-submit="$parent.doAlert()" or "$parent.$parent.doAlert()" did not yield the desired outcome.

What could be causing this issue, or how can I execute actions within SearchCtrl from the modal form?

Answer №1

If your controller is a child controller of SearchCtrl, any descendants (except for isolated scoped directives) will inherit the doAlert function automatically. In this scenario, if you are not utilizing the scope option in modal settings, the modal scope will default to $rootScope as Angular UI modal does. To provide a scope option in the settings from the controller:

Either set scope: $scope or create a new child scope by setting scope: $scope.$new().

var modalInstance = $modal.open({
    templateUrl: '/modal-search-sort.html',
    controller: 'SearchSortFormCtrl',
    size: size,
    scope: $scope, //Or $scope.$new()
    resolve: {
        items: function () {
          return $scope.items;
        }
    }
});

Documentation link

scope - a scope instance to be used for the modal's content (the $modal service will actually create a child scope of the provided scope). Defaults to $rootScope

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can be used to reveal the true value of data that has been encrypted?

Is it possible to retrieve the original value of data that has been hashed? Can the hashcode be reversed to reveal the real value of the data? String ida = new String(txtID.getText().toString()); int idb = ida.hashCode(); codeD.setText("result: " + ida) ...

Managing numerical data in a CSV file using JavaScript and Google Visualization Table

A JavaScript snippet provided below will load a CSV file named numericalData.csv, which contains headers in the first row and numerical values starting from the second row. The data is then displayed using a Google Visualization Table. I am looking to con ...

What is the best way to show search suggestions on Google Maps autocomplete once three characters have been entered?

While integrating google-maps into my react app, I encountered an issue with the autocomplete feature. I would like the location search to display options only when at least 3 keys are entered, but Google maps autocomplete starts showing options with jus ...

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

Tips on handling a Vue computed property

I am struggling to dispatch an object that is created within a computed property in vue.js. Being fairly new to this framework, I can't seem to make it work. My goal is to dispatch the object named "updateObject" to the vuex-store. I have tried using ...

Getting the present location on Google Maps for the web: A step-by-step guide

As a newcomer to this API, I have successfully generated an API key but am unsure of how to implement Google Maps. Despite my extensive research, I have been unable to find a solution that works for me. I am seeking assistance in locating users or devices ...

"Exploring the power of NodeJS with createServer, dealing with

Can instances of global.request potentially collide in this NodeJS scenario? I have a basic web server set up in NodeJS where I am globally exposing the request that is created: http.createServer(function(req, res) { global.request = req; // do ...

What is the best way to call upon a necessary module from various files?

When working with Node.js, I am using Socket.io in my main.js file like this: const io = require('socket.io')(http); Additionally, I have a separate "sub" file called api.js where I delegate some of my business logic. To include this file, I us ...

Designing a button component with text

Exploring My Demo Page, I am attempting to design a button that will serve as a closure mechanism for modals. The code snippet I experimented with is as follows: x=document.createElement('button'); x.className='superclose'; Referencin ...

The content contained within the .each loop within the click event is only executed a single time

While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...

What could be causing the React state not to update properly?

Having an issue with my Alice-Carousel in react. I'm fetching items from an API and updating the array for the carousel, but the value of items keeps coming back as undefined. Using CryptoState context to avoid prop drilling. import React from 'r ...

Using Vue to bind a class attribute with multiple Tailwind classes

I am attempting to associate an attribute and multiple tailwind classes with an HTML element. This is specifically for a tab menu where the goal is to dynamically display the title of the "active" tab and apply additional tailwind classes to modify the app ...

An issue occurred with Meteor while attempting to load or refresh the page: A Tracker afterFlush function threw an exception that is undefined

Encountering an error resulting in a blank page, with the exception of the navbar, when refreshing or directly accessing the link in a browser. This issue arises consistently under these circumstances, whereas navigation through the templates works fine. I ...

Execute function when image finishes loading (Internet Explorer)

Is there a way to execute a method once an image is completely loaded, considering that the .load function doesn't work for images in Internet Explorer? Below is the code snippet in question: <img ref="image" :src="src" :alt="alt" @load=" ...

Incorporating external CSS links in the metadata of Next.js 13

A recent update in Nextjs 13 introduced a new feature known as Metadata (https://nextjs.org/docs/app/api-reference/functions/generate-metadata), causing the removal of Head.js. Previously, I would import a CSS file using the <Head> tag as shown below ...

Angular UI-Grid encountering difficulties in rendering secure HTML content

I'm having trouble displaying server-generated HTML in UI-Grid. Specifically, I want to show HTML content in my column header tooltips, but no matter what I try, the HTML is always encoded. Here's an example to illustrate the issue: var app = an ...

Using jQuery Datatables fnReloadAjax successfully triggers a reload of the data, however, it

In my jQuery datatable, I am utilizing the code below to refresh the data: $(".unread-rows").click( function(e) { e.preventDefault(); message_table.fnReloadAjax("/letters/ajax/inbox/1"); message_table.fnDraw(); $(this).addClass("active").s ...

Unlock the Power of Heroku: Leveraging Node.js to Share Environment Variables Across JavaScript Pages

Currently, I am following the 'getting started' guide on the Heroku webpage. As part of this process, I have cloned their tutorial repository and decided to add my own index.html and app.js files to the existing /public folder. The directory str ...

Encountering an error message saying "assignment to undeclared variable"

I'm attempting to incorporate a react icon picker from material-ui-icon-picker However, I keep encountering an error stating "assignment to undeclared variable showPickedIcon" edit( { attributes, className, focus, setAttributes, setFocus, setState ...

Modify the text on a button using vanilla JavaScript

Although it may seem like a simple question, I am struggling to change the text on my button. The code for my button in the web browser console is: <button class="nav-link active" id="coholder-tab" data-toggle="tab" data-t ...