When working with two controllers, one as the parent and the other as the child.
<div ng-controller="firstCtrl as first">
<div ng-controller="secondCtrl as second"></div>
</div>
JS:
app.controller('firstCtrl', function() {
this.func = function() {
//implementation
};
});
app.controller('secondCtrl', function() {
this.parent.func(some_data);//this is what needs to be achieved
});
Is there a way to achieve this without relying on a factory or $scope.$parent?
Is there a way to achieve this functionality without relying on factories or $scope.$parent?
Unfortunately, the answer is no.
On a related note, I personally prefer avoiding the use of $scope.$parent. When working with a large application, nesting these can lead to loss of control over your app structure.
If you are looking for a way to share functions between controllers, consider using a service instead.
Include $scope in both the parent and child controllers. Save the parent method into $scope within the parent controller code:
app.controller('firstCtrl','$scope',function(){
$scope.yourFunctionName = function(some_data){
//insert code here
};
});
In the child controller, use the following to call the parent controller method:
app.controller('secondCtrl', '$scope',function(){
$scope.yourFunctionName(some_data);//this is what should be done
};
});
If you are looking for an alternative to using a service or factory in this situation, consider utilizing components. Here's an example:
angular.module('app')
.component('parent', {
controller: function() {
var $ctrl = this;
$ctrl.doStuff = function() {};
},
templateUrl: '/view.html'
});
angular.module('app')
.component('child', {
require: {
parent: '^parent'
},
controller: function() {
var $ctrl = this;
$ctrl.$onInit() = function() {
$ctrl.parent.doStuff();
};
},
templateUrl: '/view.html'
});
By adding the parent to the component's require property, you can access its data and methods within the $onInit function. I hope this suggestion is helpful.
As a newcomer to the world of Node.js and Vue development, my goal is to establish a seamless process for users to create and upload a JSON file to the server when they save data in a form. This process should occur effortlessly in the background, allowing ...
I've recently started using NextJS and I'm looking to improve my Google Pagespeed ranking. So far, I've made some good progress in optimizing different metrics. From the screenshot provided, it's clear that the only issue remaining i ...
I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...
Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...
In my PHP code, I have an array structured like this: 1) <body onload="addMarkers(<?php print_r($myArray) ?>)"> 2) <body onload="addMarkers(<?php echo json_encode($myArray) ?>)"> Unfortunately, these attempts were unsuccessful. U ...
Within an iframe, I have HTML content that includes hyperlinks. I need to prevent clicks on these hyperlinks. I managed to accomplish this using jQuery as shown below. However, I prefer not to use jQuery for this task. How can I achieve the same result ...
Is there a way to identify and shorten all elements containing a <tspan> tag to just ten characters each? For example: <tspan>Bla bla bla bla</tspan> <tspan>Bla bla bla bla</tspan> <tspan>Bla bla bla bla</tspan> ...
I'm curious why Javascript or jQuery require a page reload before applying certain effects. CSS updates in real-time, as demonstrated by the following example: This changes dynamically without needing to refresh the page @media all and (max-width:7 ...
After selecting a user, I am attempting to display a list of contracts. To achieve this, I have written the following query: /** * @param $firstname * @param $lastname * @return mixed * @throws DBALException */ public function getListPerUser($firs ...
I was quite surprised by the outcome of the code I wrote. It seemed like it wouldn't work because it was checking if something is not running and the ID matches a specific one, then executing the code regardless of the break size limit: if(!isRunning ...
https://embed.plnkr.co/oCd2WrzJjFtvgsGdHrdV3b/ Hello there, I have been working on creating a Login page and Register page for my project. However, I am now looking to add an extra functionality of confirming the password during registration. I am facing ...
Currently, I am in the process of developing an application with Next.js and incorporating multiple root layouts from the official documentation at https://nextjs.org/docs/app/building-your-application/routing/creating-multiple-root-layouts. This was neces ...
While working on my first Yeoman webapp using the ultimate-seed-generator, I encountered some errors that are hindering progress: C:\Users\Fidel\Desktop\Nueva carpeta\new-proyect>npm install > <a href="/cdn-cgi/l/email ...
This code utilizes ajax: $("form").on("submit", function () { var data = { "action": "test" }; data = $(this).serialize() + "&" + $.param(data); $.ajax({ type: "POST", dataType: "json", url: "ajax2.php" ...
I'm attempting to initiate a React project using create-react-app. Encountered an error when running npm start: Failed to compile. multi ./node_modules/react-scripts/config/polyfills.js ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/i ...
I am struggling with adding jQuery to a single WordPress page for a script I have. Despite my efforts to find solutions, I find them difficult to grasp. <script> $(document).ready(function(e) { $('#checkboxtest').change(function(){ if( ...
I need help with updating a FlatList in my app. Currently, the list is populated by an array stored in the component's state and can be filtered using a filtering function that updates the state with a new filtered array. However, I have noticed that ...
I have implemented the anime-js animation library to create an effect where a div grows when hovered over and shrinks when moving the mouse away. You can find the documentation for this library here: The animation works perfectly if you move slowly, allow ...
I have encountered an issue while trying to create a simple custom directive. When I specify the directive as <div my-info></div> in my HTML file, it works fine. However, when I specify it as <my-info></my-info>, it does not work. ...
To access items and products in my database, I need to retrieve the "ean" field from the product and check if it matches the one in the request body. The structure of my database is as follows: "cart": { "items": { "0": {info here}, "1": {info ...