Inheritance with AngularJS Controllers: Issues with "this" reference in child controllers

Currently, I am utilizing the controllerAs syntax in my project.

To inherit from a parent, which serves as more of a base or abstract controller, I have used $controller. I came across an insightful discussion that provided the foundation for this approach.

One interesting observation is that when using a function that references a controller property (this.propName), it seems to access the parent's context rather than the current controller's this. For a clear demonstration, check out this demo (plunkr).

For additional reference, here is a link to both my parent controller and child controller on GitHub Gist.

javascriptangularjsinheritance

Answer №1

Make the necessary adjustments to the sayMyName function as shown below:

function sayMyName() {
  alert(this.name);
}

When accessing the name property on the base controller, the alert should display the name value from the instance that is being referenced, not the original instance where it was created.

Check out the updated version on Plunker by following this link

Answer №2

let application = angular.module('myApp', [])
application.controller('PrimaryController',function() {
    this.primaryUser = 'Primary';
    this.displayUser= function() {
        alert(this.primaryUser);
    }
});
application.controller('SecondaryController', function($scope, $controller) {
    let controller = $controller('PrimaryController as primary', {$scope: $scope});
    angular.extend(this, controller);
    this.primaryUser = 'Secondary';
});

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

PHP displaying incorrect value after modifying value in JavaScript

One issue I am facing is with an html page that submits a form through javascript. Prior to the submission of the form, I modify the value of a hidden tag, which should then be retrievable in php. However, when attempting to retrieve the value in php, it a ...

phpjavascript

Discover the location by determining the distance from established points

Before I get redirected to this particular question, let me clarify that while I've come across it, I am unable to comprehend its content (I wish I could). What I'm really seeking is a straightforward method (bearing in mind my limited math skill ...

javascript

Migrating nl2br to JavaScript/React - Techniques for manually encoding text?

Currently in the process of transitioning a small project from Flask + server-side template rendering to Flask + React. One particular component utilizes a Jinja2 custom filter called nl2br, which essentially converts newlines in plain text into <p> ...

javascriptpythonreactjsescapingjinja2

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

Here's the code that is causing me trouble: this.http.get('http://localhost/....) .map((res) => res.json()) .subscribe(( this.navCtrl.push(OtpPage,{mobileno:this.mobile}); }, (err) => { console.log(err ...

javascriptphpangularjsionic-framework

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

javascripthtmlcssresponsive-design

How to extract precise text from HTML with JavaScript

In my exercise list written in Latex inside strings, I created a php script to generate exercises using: <button type = "button" onclick = "aggiornaInfo()">Save</button> <?php $exercises = array( ...

javascriptphphtml

Hiding content: impossible to change. Acting independently?

Currently, I am attempting to showcase a count-down feature on my website (which is currently in localhost so it cannot be linked). However, I have encountered a very peculiar issue. I suspect that the JavaScript may be causing the display to not appear. ...

javascriptcss

Image Filter: Only Display Selected Images, Not All

I have designed a Filter Image Gallery where all images are initially displayed when the page loads. There are four different tabs available - Show all, Nature, Cars, and People. However, I want to change this default behavior so that only Nature filter i ...

javascriptjqueryhtmlcssimage

Unable to execute focus() - query not functioning

In my code, I have an input field and I am trying to invoke it in my js file. $(document).ready(function () {$('#input_id').focus(); }); However, the focus is not working as expected. Even when I try to trigger it manually in my Chrome console, ...

javascriptjqueryfocus

Interference in the output of .innerHTML leads to disruption

I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering mul ...

javascriptjqueryhtmlcss

Is there a way to dynamically integrate the Insert Column feature into the ContextMenu of a Syncfusion Treegrid?

What is the best way to add Insert Column functionality to the ContextMenu of a Syncfusion Treegrid? Insert Column Rename Column Delete Column ...

javascriptsyncfusion

The view in Ionic 2 does not update appropriately when using promises

There appears to be a delay in the application refreshing until after the next action is taken (such as clicking a button for the second time). Take, for instance: import {Component} from '@angular/core'; import {SqlStorage} from "ionic-angular ...

angularjsionic2

Creating a Singular Instance for Dynamically Loaded Module in Next.js

I'm currently working on creating a Singleton instance for a dynamically imported module in my Next.js app. However, the problem is that each time I call getInstance, it initializes a new instance instead of reusing the existing one. The following co ...

javascriptnext.js

Error message: Iframe chrome encountered a Uncaught DOMException when attempting to access the 'localStorage' property from 'Window': Document does not have permission

I recently developed a JavaScript widget that utilizes localstorage to set and retrieve properties of the window. Upon opening this widget in Chrome, I encountered an error message: Uncaught DOMException: Failed to read the 'localStorage' prop ...

javascriptjquery

Disabling a chosen option within a dropdown menu

`Hello there, I am just starting out with JavaScript and jQuery. Currently, I am developing a web application for ordering food and drinks. I have a dropdown menu for selecting breakfast items and the quantity. When the "add" button is clicked, a dynamic ...

javascriptjqueryhtml

Guide to deploying a Node.js application with a Gruntfile on Heroku

I have encountered an issue while trying to deploy my Node.js application to Heroku using the BUILDPACK_URL. Despite searching for a solution, I have been unable to find a suitable answer. Here is the procedure that I followed: heroku create myapp hero ...

javascriptrubynode.jsherokugruntjs

Creating a WebExtension using Angular and TypeScript

I am currently working on creating a WebExtension using Angular and Ionic. The extension successfully loads the application and enables communication between Content Script and Background Script. However, I am facing an issue where the TypeScript code is n ...

javascriptangulartypescriptionic-frameworkfirefox-addon-webextensions

Exceedingly High Outputs from the Haversine Formula

I am currently utilizing the Haversine formula in order to compute the distance between two specific points on the earth's surface. Below is the code snippet I am using: var app = angular.module('app', []); app.controller('firstCtr ...

javascriptangularjsgeolocationcoordinateshaversine

What could be causing the absence of ReactDOM in my hello world application?

I have recently started learning Reactjs and I'm attempting to run a hello world program in the browser. However, I encountered an error which reads: react-dom.min.js:12 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_ ...

javascripthtmlreactjs

How does setting 0 as the initial element of an array prevent the execution of a "for" loop in JavaScript?

Take a look at the JavaScript code snippet below: var words = delIdx = [0, 1, 2, 3]; for(let i=0; delIdx[i]; i++) { console.log('DELIDX: ', delIdx[i]); } for(let i=0; words[i]; i++) { console.log('Word: ', words[i]); } The arrays ...

javascriptarrays