How to inherit and override controller methods in angularjs (java pendent)?

Question

I have a simple controller, and would like to introduce a very similar additional controller, but without copying too much code.

angular.module('test').controller('parentController', parentController);
parentController.$inject = ['$scope', '$location', 'someService'];

function myController($scope, $location, someService) {
    var params = getQueryString();
    var rsp = executeQuery(params);

    processResponse(rsp);

    function getQueryString() {
        return "?param=1&someparam=2";
    }

    function executeQuery(params) {
        ...
    }

    function processResponse(rsp) {
           //process rsp, convert some parts, and populate model properties, like
           $scope.model.prop1 = rsp.data.prop1;
    }
};

Now I'd like to create a controller that is 90% equal to the code of the parentController. The main differences:

get getQueryString() should return a different query
the response properties setter to the $scope should contain 1 changed line
I need additional filter functions for inside the new controller, that should only exist for it, but not for the parentController.

Coming from java, I'd solve this for example with inheritance and overridden methods, like:

public cass ParentClass {
    String getQueryString() {
        return "?param=1&someparam=2";
    }
}

public class CustomClass extends ParentClass {
    @Override
    String getQueryString() {
        return "?customparam=1";
    }

    @Override
    void processResponse(rsp) {
         super.processResponse(rsp);
         //read "rsp.paramX" additionally
    }
}

But how can I achieve similar with angularjs?

Tomer · Accepted Answer · 2016-06-08 08:27:06Z

1

Lets assume you have this structure:

<div ng-controller="parentCtrl">
   ...
   <div ng-controller="childCtrl"></div>
</div>

Since the child controller is under the parent controller scope, it can access all methods/varialbe of the parent's controller, as long as they are defined on the $scope of the parent controller (i.e. $scope.someVar).

UPDATE

If the 2 controllers don't have a parent/child relationship, you'll need to use a service, where you will put the shared logic, and then you can define an init function on the service that starts the sequence.

So in you're controllers all you have to do is call myService.init() (and maybe pass some parameters)

edited Jun 8, 2016 at 8:27

answered Jun 8, 2016 at 8:15

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

membersound Over a year ago

I'm not having a nested parent-child structure. The controllers should belong to different views, still are very similar in their logic. When myController is run, it acts as some kind of template class, and executes those functions in order: getQueryString, executeQuery, processResponse. I'd like to prevent having to repeat those function calls in the child, as their process is already defined in the parent class.

membersound Over a year ago

I mean I'd have to explicit call those methods from the child, even though their execution order is already defined in the parent class.

Tomer Over a year ago

So, the only choice here is to define a service that contains the logic and, then you define the functions on both of the controller and use the service: docs.angularjs.org/guide/services

Abdel Raoof Olakara · Accepted Answer · 2016-06-08 08:38:53Z

0

you could use the $injector to bring in parent controller properties to the child controller.. your child controller will be something like this:

function childController($injector, $scope, someService) {
    // override the method
    this.getQueryString() {
        // new query will be returned
    }

    $injector.invoke(myController, this, {
          $scope: $scope,
          someService: someService
     });
};

You can find details of this approach here: https://www.exratione.com/2013/10/two-approaches-to-angularjs-controller-inheritance/

answered Jun 8, 2016 at 8:38

Abdel Raoof Olakara

19.4k11 gold badges92 silver badges134 bronze badges

2 Comments

membersound Over a year ago

Does this approach mean any service that is to be injected into parentController must also be injected into childController, and then assigned inside invoke()?

Abdel Raoof Olakara Over a year ago

yes, you are right.. the service have to be injected to childController and then assigned inside the invoke method

Collectives™ on Stack Overflow

How to inherit and override controller methods in angularjs (java pendent)?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related