Controller As inheritance with $controller

Question

I have a pretty big question about this issue but I thought it might be easy to split it in smaller ones.

So, I'm trying to use $controller to inherit from a ParentController, but things are not working as expected.

I have a jsfiddle here. And this is the code.

angular
    .module("app",[])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)

    ParentController.$inject = ['$scope']
    ChildController.$inject = ['$controller', '$scope'];

function ParentController($scope) {
    var vm = this;    

    vm.foo = 'parent foo';
}

function ChildController($controller, $scope) {

    $controller('ParentController as vm', {$scope: $scope});

        var vm = $scope.vm; // view model       
}

And a simple html

<div>
  {{vm.foo}}
</div>

When I configure the app to use the ParentController, with this

<body ng-app="app" ng-controller="ParentController as vm">

it works fine.

But as it is now, with the ChildController, is not working, it's like vm does not include the property foo created in ParentController.

What am I doing wrong?

Many thanks.

dfsq · Accepted Answer · 2016-01-27 11:54:04Z

1

If you really want to go with this approach then you need to extend child controller with base parent controller. You can use angular.extend for this:

function ChildController($controller, $scope) {
    angular.extend(this, $controller('ParentController', {$scope: $scope}));
    this.bar = 'child bar';
}

Just make sure you first extend child controller instance object (this) with parent controller instance, and only after that you define new child properties.

Demo: http://plnkr.co/edit/mdyCOUdZSLUV06AMnoZG?p=preview

answered Jan 27, 2016 at 11:54

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

David Over a year ago

Thanks! That works fine with vars but I tried to create a new function and it's not working fine. http://plnkr.co/edit/Cq6CB8srju5lbJhFDbFO?p=preview

dfsq Over a year ago

@david It works with methods too. The problem is that you used var for function expression and they don't hoist. You should use function declaration instead if you want to put the function after vm.someValue = someValue; assignment. plnkr.co/edit/EhjWgbPSNQvfn68WvYul?p=preview

Shrikant · Accepted Answer · 2016-01-27 12:01:50Z

0

HTML

<div>
  {{vm.foo}}
</div>

Controller

  angular
    .module("app",[])
    .controller('ParentController', ParentController)
    .controller('ChildController', ChildController)

    ParentController.$inject = ['$scope']
    ChildController.$inject = ['$controller', '$scope'];

function ParentController($scope) {
    var vm = this;
    vm.obj={};
    vm.obj.foo = 'parent foo';
    console.log('parent',vm.obj);
}

function ChildController($controller, $scope) {

  $controller('ParentController as vm', {$scope: $scope});

    var vm = vm; // view model      
    console.log("child",$scope.vm.obj);
}

answered Jan 27, 2016 at 12:01

Shrikant

5385 silver badges16 bronze badges

Collectives™ on Stack Overflow

Controller As inheritance with $controller

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related