Exploring Angular controller inheritance and the ability to override methods from a superclass

Is it possible to call a function on the superclass controller when extending a controller in Angular and overriding a function?

To illustrate with an example in Java:

class Foo {
    void doStuff(){
        //do stuff 
    }
} 

class FooBar extends Foo {
     void doStuff(){
         super.doStuff();
         //do more stuff
     }
}

I am looking for a way to achieve something similar in Angular, like this:

myApp.controller('FooCtrl', function($scope){

    $scope.doStuff = function(){
         //do stuff
     }
}).controller('FooBarCtrl', function($scope){
   angular.extend(this, $controller('FooCtrl', {$scope: $scope}));

   $scope.doStuff = function(){
          // ??? <- INSERT ANSWER HERE  
         //do more stuff
     }
}

Answer ā„–1

I wouldn't suggest following this approach, but if you're looking for an answer to the question, here's one way to tackle it:

myApp.controller('WidgetCtrl', function($scope){

    $scope.performAction = function(){
         //perform action
     }
}).controller('WidgetBarCtrl', function($scope){
   angular.extend(this, $controller('WidgetCtrl', {$scope: $scope}));
   //extend the scope
   var super = angular.extend({}, $scope);
   $scope.performAction = function(){
          // ??? <- INSERT ACTION HERE  
         //perform additional actions
         //call the "superclass" methods
         if(super.performAction){
            super.performAction();
         }
   }
}

If we brainstorm further, perhaps creating a helper service that allows overriding properties with references to superclass implementations could streamline the process. One idea could involve overriding "this" to achieve cleaner code. For example:

$scope.performAction = $override($scope.performAction, function() {

    this();  //calls the original performAction function
});

.factory('$override', function(){

    return function(method, func){
        return function(){
            return func.apply(method, arguments);
        };
    };
});

Answer ā„–2

Utilize $parent to access parent elements

This will allow you to

$rootScope.$parent.executeTask()

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

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

Retrieve the text input from its respective radio button

There are two radio buttons, each accompanied by an input text field. When a user selects a radio button, they can also enter some corresponding text. My inquiry is: What is the best method to retrieve the entered text for the selected radio button? ...

Capture a screenshot of an embedded object and include it in an email using the mailto function

Is there a way to capture a screenshot of a flash object on a webpage and then send it via email using a mailto: form submission to a designated address? I have attempted to use different JavaScript techniques, but none seem to be successful. Appreciate a ...

What is the best way to eliminate all whitespace in AngularJS binding strings?

I attempted the following: <div id="{{mystring.replace(/[\s]/g, \'\')}}"></div> However, it does not appear to be functioning as expected. The "mystring" object is located on the $scope and contains a string such as " ...

Displaying a dropdown selection that showcases two object properties lined up side by side

I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are: Bob Smith Director Mike Kawazki HR Jane Doe Manager I want them to be shown as: Bob Smith Director Mi ...

Using Regular Expressions to access a deeply nested object

Within my JS objects, there is a common grandchild property called 'products'. For example: ecommerce.add.products, ecommerce.remove.products, ecommerce.detail.products, ecommerce.checkout.products, ecommerce.purchase.products I am attempting t ...

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

The triggering of routing in Next.js is not established by useEffect

I'm facing an issue with my Next.js dynamic page that uses routing based on steps in the state. The route is supposed to change whenever a step value changes, like from null to "next" or back. However, the useEffect hook doesn't seem to be reacti ...

Using React Native to implement Firebase onSnapshot with FlatList pagination

INTRODUCTION I have a collection of items stored in FireStore with the "date" property. On the client side, I'm using a FlatList to display these items ordered by date, starting with the most recent item at the top. The challenge I'm facing is ...

"Encountered a malfunction in the dialogue system on the second attempt

Looking for a way to pass an array to a Modal Dialog using a template. My approach, based mostly on AngularJS documentation, is working initially but has issues with subsequent openings of the dialog: angular.module("materialExample").controller("calenda ...

Converting Vue HTML to PDF without relying on html2canvas functionality

My current challenge involves creating a PDF file from either HTML or Vue component. I have experimented with various libraries such as jsPDF, html2pdf, and vue-html2pdf, but it seems like they all rely on html2canvas, causing the UI to freeze for a few ...

Leveraging Bootstrap within an Angular 17 project

What is the process to integrate Bootstrap into an Angular-17 application using CLI? I attempted to install Bootstrap globally by running npm install -g bootstrap and then added necessary lines in angular.json under style and script. "node_modules/bo ...

Enable hyperlink to open in a new browser tab after user clicks on button embedded inside an iFrame

<head> </head> <div> <iframe src="https://....."></iframe> </div> I'm looking for a way to open the link in a new tab when clicking on this button. Currently, the page loads within the iFrame when clicked. I&a ...

Component template using Knockout.js and RequireJS for HTML widgets

Trying to implement the widget example for knockout from here. Unfortunately, I am having issues loading the template from an external HTML file using requirejs. ko.components.register('like-or-dislike', { template: { require: &apos ...

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

Are you familiar with how to include an operator in an object (rather than the entire class)? When it comes to a method, I know you can achieve that by: my_object.new_function = function(){return 1}; Then invoking my_object.new_function() will output ...

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

Encountering an error while attempting to merge webgl_interactive_cubes with pointer lock in three.js: "Unable to access properties of undefined (reading 'getHex')."

Iā€™m in the process of developing a scene with walk-navigation and interactive objects for educational purposes. To achieve this, I am utilizing the Pointer Lock Control example for walk navigation and the interactive cubes example from three.js. The proj ...

In JavaScript, the mousedown event consistently receives the "e" parameter as the event object

I am facing an issue while trying to handle a middle mouse button click event using JQuery on a DataTable from the website https://datatables.net/. Below is the code I have implemented. var tbl = document.getElementById("entries"); $(tbl).on('mousedo ...

Ways to receive a POST request from an external server on a GraphQL Server

Currently, I am working on a project that utilizes GraphQL. As part of the project, I need to integrate a payment processor. When a user makes a successful payment, the payment processor sends a POST request to a webhook URL that should point to my server. ...