Angular controller inheritance / overriding "superclass" methods

Question

When I extend a controller in angular, is there any way to call a function on the "superclass" controller from a "subclass" function that overrides it?

For clarity - in Java I'd do:

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

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

and I'd like to do the equivalent in angular - something

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
     }
}

Short answer: yes (see: stackoverflow.com/a/19670187/624590 ). Long answer (/opinion): consider mixins or factories as your means of DRYing your code instead of extends/inheritance. — DRobinson
– DRobinson, Commented May 15, 2015 at 1:52
But to make your attempt work, stash the old function somewhere before overriding it: var superDoStuff = $scope.doStuff; $scope.doStuff = function(){ superDoStuff(); /* do more stuff */ }; — DRobinson
– DRobinson, Commented May 15, 2015 at 2:04

Joe Enzminger · Accepted Answer · 2015-05-15 02:16:48Z

I wouldn't recommend this pattern, but as an answer to the question, here is a way to do it:

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

    $scope.doStuff = function(){
         //do stuff
     }
}).controller('FooBarCtrl', function($scope){
   angular.extend(this, $controller('FooCtrl', {$scope: $scope}));
   //extend the scope
   var super = angular.extend({}, $scope);
   $scope.doStuff = function(){
          // ??? <- INSERT ANSWER HERE  
         //do more stuff
         //call the "superclass" methods
         if(super.doStuff){
            super.doStuff();
         }
   }
}

Spitballing, I suppose of you could write a helper service that allowed you to override properties with references to the superclass implementations to make it cleaner. Perhaps by overriding "this". Something like:

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

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

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

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

kwangsa · Accepted Answer · 2015-05-15 01:59:28Z

0

You can use $parent

so

$scope.$parent.doStuff()

edited May 15, 2015 at 1:59

answered May 15, 2015 at 1:48

kwangsa

1,71112 silver badges16 bronze badges

2 Comments

DRobinson Over a year ago

Different kind of inheritance. The question is trying to create a controller that has all of the properties of another controller, but can override them with its own (superclass / subclass style), not a controller that's nested in another (as your answer suggests). en.wikipedia.org/wiki/…

drew moore Over a year ago

@DRobinson - precisely.

Collectives™ on Stack Overflow

Angular controller inheritance / overriding "superclass" methods

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related