Is it possible to implement the same technique across various child controllers in AngularJS?

I am trying to execute a function in a specific child controller. The function has the same name across all child controllers. My question is how can I call this function from a particular controller?

Parent Controller:

app.controller("parentctrl",function($scope){
$scope.clickfunc = function(){
 $scope.childmethod();
}
});

Child Controllers:

app.controller("childctrlone",function($scope){
$scope.childmethod= function(){
 alert(1);
}
});
app.controller("childctrltwo",function($scope){
$scope.childmethod= function(){
 alert(2);
}
});

I need to invoke $scope.childmethod() from childctrltwo

Answer №1

A recommended way to achieve this is by emitting an event from the parent and listening to it in child controllers.

app.controller("parentctrl",function($scope){
$scope.clickfunc = function(){
 $scope.$broadcast("callChildMethod",{child : 1});//1 for calling the first child method, 2 for the second child method
}
});
app.controller("childctrlone",function($scope){
$scope.childmethod= function(){
 alert(1);
}
$scope.$on("callChildMethod",function(event,args){
if(args.child == 1) $scope.childMethod()
})
});
app.controller("childctrltwo",function($scope){
$scope.childmethod= function(){
 alert(2);
}
$scope.$on("callChildMethod",function(event,args){
if(args.child == 2) $scope.childMethod()
})
});

Other ways (not recommended)-

Using $$childHead or $$childTail-

// works only for apps with two children in order
 app.controller("parentctrl",function($scope){
    $scope.clickfunc = function(){
      $scope.$$childHead.childMethod();// first child
      $scope.$$childHead.$$nextSibling.childMethod(); // second child
      $scope.$$childTail.childMethod()// second child
      $scope.$$childTail.$$previousSibling.childMethod()//first child
    }
 });

Using angular.element()

 app.controller("parentctrl",function($scope){
    $scope.clickfunc = function(){
      angular.element("#idofFirstChild").scope().childMethod();// first child
      angular.element("#idofSecondChild").scope().childMethod(); // second child
    }
 });

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

Troubleshooting: Bootstrap 5 Alert not Displaying on Website

I'm experiencing an issue trying to display a bootstrap alert in my HTML code. Here is the code I'm using: <div class="alert alert-success alert-dismissible fade show" role="alert"> text & ...

What is the process for assigning a regular expression to an object?

As I work on editing a configuration file, I'm encountering some issues where things aren't quite functioning as expected. Below is the code snippet I am working with: config.module.rules.unshift( { test: "/ckeditor5-[^/\\ ...

including a callback in a loop

I am attempting to have jQuery delete an element after it has gone through a series of other functions, however the following code executes the remove() command before the for loop runs any iterations. function waves(){ for(i=0;i<=10;i++){ ...

Struggling to find the definition of a Typescript decorator after importing it from a separate file

Consider the following scenario: decorator.ts export function logStuff(target: Object, key: string | symbol, descriptor: TypedPropertyDescriptor<any>) { return { value: function (...args: any[]) { args.push("Another argument ...

React - retrieving the previous page's path after clicking the browser's "back" button

Imagine I'm on Page X(/path-x) and then navigate to page Y(/path-y). Later, when I click the "back" button in the browser. So my question is, how do I retrieve the value of /path-y in PageX.tsx? Note: I am utilizing react-router-dom ...

Exploring the power of asynchronous Mongoose queries using the async await

I have a system where authenticated users can create new user accounts and assign them to specific groups. The middleware flow for this process is outlined in the following route: router.post('/account/add-users', userController.validateRegist ...

Conceal the URL and any parameters upon successful completion of AJAX request

In my ajax js code, the solonreport.jsp file returns a URL link that connects to a local report server and generates an Excel report. However, when using this link with the window.open(json.url) function, the link and parameters are visible to the user. ...

The customer opts to store all images indefinitely into the data stream

I have set up a node server that captures images from a webcam at regular intervals and sends them to the client using the Delivery.js node module. Upon monitoring the browser resources in Chrome development tools, it appears that each image sent is being ...

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

Despite trying numerous similar solutions, none of them have proven effective for my issue. Within a form, users can input an unspecified amount of select options that can be added as needed using AJAX. My goal is to post this array to a PHP page via AJAX ...

Are you interested in implementing the switcher function in a React JS class component?

I am having trouble implementing the switcher method in my react app, which is built using class components. Can you provide guidance on how to utilize the useThemeSwitcher() function in class components? How can I integrate this function into my web app ...

The issue with fetching user profile data on the client-side in Next.js 14

I've run into a problem with client-side data fetching on my Next.js 14 project. More specifically, I'm trying to retrieve user profile information from a backend API using Axios within a component, but for some reason, the data isn't coming ...

Value in any array matches

I need help finding a match array within an input value: var values = new Array('stackoverflow', 'google', 'yahoo'); var userInput = $('#txtAddress').val(); if ($.inArray(userInput, values) != -1) { alert(&apos ...

What strategies should be considered for styling AngularJS components?

Currently, I am engaged in a project using AngularJS with the intention of gradually organizing things for Angular 6 or whichever version is available when we begin the upgrade process. A significant part of this endeavor involves converting existing direc ...

What is the best way to utilize a JavaScript function across all pages in Drupal 7?

What is the best way to utilize a global JavaScript function in Drupal 7? I have structured my JavaScript file as follows and included it using drupal_add_js(): (function($) { function add_if_country_is_not_usa() { // Determine the current country ...

Bringing in CSS variables to a Typescript document

In order to streamline the styling process for our app, we have established a theme.css :root file containing a set of commonly used variables that can be accessed across all other .css files. However, some of our older code follows a similar structure bu ...

Vue app: ESLint throwing error for undefined global variable in component during npm run serve

In my main.js file, I am initializing a new Vue instance on the window object: window.todoEventBus = new Vue() Within my components, I am attempting to access this global todoEventBus object like so: created() { todoEventBus.$on('pluralise&apos ...

Tips for preventing the browser from freezing when incorporating a large HTML chunk retrieved through AJAX requests

I've developed a web application that showcases information about various items. Initially, only a small portion of the items are displayed at the top level. Upon loading the page for the first time and displaying these initial items, I make an AJAX r ...

What is the best way to assign JSON data to a Class variable within Angular?

In my code, I have a class called Projects export class Projects { project_id: number; project_name: string; category_id: number; project_type: string; start_date: Date; completion_date: Date; working_status: string; project_info: string; area: string; add ...

Email address string loses the '+"' when using AJAX

My ajax code has been working well in most cases, but when I tried using it for updating user details on my page, I noticed that the ""+"" symbol was getting lost if used in an email address (such as <a href="/cdn-cgi/l/email-protection" class ...

Sending template reference from one Angular component to another

I have a main grid component that includes smaller grid-item components. The majority of these grid items navigate to a specific route when clicked. However, there is one particular item that should open a modal window instead of navigating. Is there a wa ...