angularjs - controller inheritance calling parent

Question

I have a parent controller inside the first module and a "child" controller inside the second module. The second module has a dependancy to the first. I want my "child" controller to inherit the "parent" controller. But the problem is how to call the "parent" controller method.

For example:

 SecondModule.controller("childBrowseCtrl", function($scope, $injector, $controller){
        $injector.invoke(ParentBrowseCtrl, this, {$scope:$scope});

        //this overrides the onedit function from parent
        $scope.onEdit = function(){
            console.log("from edit console");

            //how do i make this work?
            ParentBrowseCtrl.$scope.onEdit();
        };

});

The html structure:

 <html>
   <head></head>

   <body>
      <div ng-view></div>
   </body>

   <script src="coreapp.js"></script>
   <script src="mainapp.js"></script>

   <script>
     angular.bootstrap(document,["MainApp"]);
   </script>

   </html>

Ok this doesnt show any controllers being nested. Are you nesting them with routing? — Sten Muchow
– Sten Muchow, Commented Apr 22, 2014 at 8:25
Nope, the only thing thats close to inheritance is that i invoke the parent controller inside the child. — zPrima
– zPrima, Commented Apr 22, 2014 at 8:42

sp00m · Accepted Answer · 2014-04-22 08:25:04Z

4

This may work:

var parentOnEdit = $scope.onEdit;

$scope.onEdit = function() {
    parentOnEdit();
};

answered Apr 22, 2014 at 8:25

sp00m

49k31 gold badges152 silver badges263 bronze badges

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

Comments

Sten Muchow · Accepted Answer · 2014-04-22 08:08:42Z

0

Controllers setup inheritence through the prototype chain so if your controller nesting structure in the html is correct then the child controllers will inherit prototypically.

You can check this if you

console.log($scope);

in the children controllers to see if they properly inherited from the parent.

answered Apr 22, 2014 at 8:08

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

6 Comments

zPrima Over a year ago

$scope.$parent has the rootScope, there is no nesting of controllers in the html.

Chandermani Over a year ago

Controller do not inherit, but their $scope property does.

zPrima Over a year ago

if i override the $scope.onEdit function, then the implementation of the parent onEdit is gone, that's whats bugging me.

Sten Muchow Over a year ago

@zPrima Then the structure is setup correctly - this is how prototypical inheritance works.

zPrima Over a year ago

Somehow i did not try to save the onEdit function before overriding it :) @sp00m answer did just that.

|

Ruslan Ismagilov · Accepted Answer · 2014-04-22 08:17:40Z

0

You could try:

$scope.$parent.onEdit();

Great article about scopes: https://github.com/angular/angular.js/wiki/Understanding-Scopes

answered Apr 22, 2014 at 8:17

Ruslan Ismagilov

1,3487 silver badges14 bronze badges

1 Comment

Ruslan Ismagilov Over a year ago

maybe onEdit() in more than one step-parent scope? $scope.$parent.$parent or more... but it is bad practice. If so, you need to rethink structure of this.

Yasser Shaikh · Accepted Answer · 2015-12-16 06:48:58Z

0

this worked for me

// in parent
$scope.parentFnCall = $scope.functionName;

// in child
$scope.parentFnCall()

answered Dec 16, 2015 at 6:48

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

Collectives™ on Stack Overflow

angularjs - controller inheritance calling parent

4 Answers 4

Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related