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.
I have successfully implemented DirtyForms, a plugin that triggers a confirmation dialog when a user tries to navigate away from a page. The base functionality of the plugin is working as intended. Now, I am trying to integrate jQuery UI's Dialog for ...
One of my microservices deals with user login and registration. Upon making a request to localhost:8080 with the body { "username": "test", "password":"test"}, I receive an authentication token like this: { "tok ...
Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...
I am interested in monitoring the changes of an object, referred to as x, specifically its properties which are checkboxes. When a user checks a box, it alters the checked property (prop1) to 1. Each property contains certain content, and when enabled, it ...
Currently, I am in the process of developing an app focused on chat rooms where each room is restricted to only 2 individuals. This application should also keep track of the sequence in which users join a particular room. Building upon a socket-based chat ...
I am struggling with the installation of CKEditor. After downloading the editor from the website, I inserted the code below between the head tags of my webpage: <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script typ ...
I am currently utilizing the jquery autocomplete plugin created by pengoworks. You can find more information about it here: Within the function that is triggered when an entry is selected, I need to determine the identifier of the input element. This is i ...
https://i.sstatic.net/O6okm.png I am seeking assistance with webapi and angular development. I am struggling to find a solution to my issue, so any help would be greatly appreciated. Additionally, if you have any recommendations for resources where I can ...
After setting up my express server to connect to mongodb, I encountered an issue despite everything working fine initially. I created a collection in my mongodb called projects (plural form). In my project.model.js file, I defined the model as follows: c ...
In my component, I maintain an array of boolean values as a state. When the value is false, I need to change it to true. this.state = { checkedPos: [] } handleChange(index, reaction) { if (!this.state.checkedPos[index]) { this.state.ch ...
Here is a code snippet for implementing a music player using context: import React from 'react'; import { BarSongTitle, BottomBar, Button, PlayList, Song, SongTitle, } from './styles.js'; import { songList } from './con ...
I am experiencing an issue with a button that is supposed to open a new window as a popup below the parent page. It works correctly in IE and Firefox, but in Chrome, the popup appears on top of the parent window. Can someone please provide a solution? Fo ...
How can I generate an edit link with a function that requires multiple parameters extracted from different data columns received via ajax? I have come across the render callback, but it seems to only return one column value at a time and my requirement is ...
I have created a v-navigation-drawer component with Vue 3 and Vuetify 3. The v-navigation-drawer functions properly, but I want the child menus to be visible by default without requiring the user's click when the project first launches. I am using v- ...
Take a look at this example I put together in a fiddle: https://jsfiddle.net/r5yj99bs/1/ I'm aiming to kickstart as soon as the page loads, while still providing the option to pause/resume. Is there a way to show the remaining time as '5 minute ...
The request is sent from an external source beyond my control xyz.php <form action='https_:_//xyz.com/javascriptFile' method='POST'> <input type='text' name='data' /> </form> to: (My custom f ...
I am looking to display the first element suggested by the Angular Typeahead directly in the input box, instead of just in the dropdown. I have searched extensively but have not been able to find a way to access the elements shown in the dropdown. The goal ...
Here is the JSON Format I am working with: { "Data": { "-template": "Parallax", "Explore": { "IslandLife": { "TourismLocation": [ { "Title": "Langkawi", "Latitude": "6.350000", "Longitude": "99.800000", "YouTub ...
On my main index page, there are 18 divs representing different books. When a user clicks on a div, they can see details about the book such as title, author, and summary. There's also an option to add the book to a Collections array by clicking the " ...
Utilizing $event.currentTarget to access the element on ng-click: <div ng-click="eventHandler($event)" class="bg-master m-b-10" id="slider-tooltips" nouislider=""></div> Upon inspecting my controller&apo ...