AngularJS controller inheritance for controllers added to module defintion

Question

In my angular app i have a module defined in one js file

angular.module('myApp',[])

In another js file I have a base controller defined

angular.model('myApp').controller('baseController',
      function($scope){

         $scope.var1 = 'foo';
         $scope.func1 = function(){
           // do something
         }
      }
   )

now based on Can an AngularJS controller inherit from another controller in the same module? I want to create a controller in another js file that inherits from baseController and adds some fields and functions eg

angular.model('myApp').controller('myController',
      $injector.invoke(baseController, this, {$scope: $scope}); 
      }
   )

But this gives an error as it does not know about baseController. I have tried putting baseController in '' but no help.

Any ideas. Thanks Martin

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

In a situation like that, you'll need to write a service that will share data between your controllers.

you can checkout this link for more info about services and then, inject the service in your controllers.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 21 '14 at 07:04

Olatunde Garuba

1,049
1
16
21

Marian Ban · Answer 2 · 2014-10-21T07:41:14.897

angularjs is using prototypical inheritance where child controllers inherit $scope from parent controllers. The only thing you need to do is to wrap a child controller with a parent:

<body ng-controller="MainCtrl">
    <button ng-click="parentAction()">parent action 1</button>
    <button ng-click="parentAction2()">parent action 2</button>
    <div ng-controller="ChildCtrl">
       <button ng-click="parentAction()">parent action 1</button>
       <button ng-click="parentAction2()">parent action 2</button>
    </div>
  </body>

controller:

app.controller('MainCtrl', function($scope) {
  $scope.parentAction = function () {
    alert('hello from parrent');
  };
  $scope.parentAction2 = function () {
    alert('hello from parrent 2');
  };
});

app.controller('ChildCtrl', function($scope) {
  $scope.childAction = function () {
    alert('hello from child');
  };

  $scope.parentAction2 = function () {
    alert('overridden action');
  };

});

http://plnkr.co/edit/6VYCJIemg0cQCYG8jVDF?p=preview

rahpuser · Answer 3 · 2014-11-07T15:04:43.490

There is another alternative if you don't want to create a hierarchy with yours controllers.

<body ng-controller="MainCtrl">
    <button ng-click="parentAction()">parent action 1</button>
    <button ng-click="parentAction2()">parent action 2</button>
    <div ng-controller="ChildCtrl">
       <button ng-click="parentAction()">parent action 1</button>
       <button ng-click="parentAction2()">parent action 2</button>
    </div>
  </body>

So if this hierarchy doesn't fit your needs, you could create inheritance as the old school by prototyping yours controllers..

Here code example: jsfiddle

var app = angular.module('myApp', []);

    var parent = function($scope){
        $scope.parent = function(){
            alert('parent method');
        }
    };

    // you could do some prototyping as well
//parent.prototype.parent2 = function(){
//    alert('parent2 method');
//};

    var child = function($scope){
        parent.call(this, $scope);
        //$scope.parent2 = this.parent2;
    };
    child.prototype = Object.create(parent.prototype);
    child.prototype.constructor = child;


app.controller('parent', parent);

app.controller('myController', child);

AngularJS controller inheritance for controllers added to module defintion

3 Answers3