Thursday, November 5, 2015

AngularJS - Inheritance in Controllers

Ref :- http://viralpatel.net/blogs/angularjs-controller-tutorial/

Inheritance in Controllers

 

In order to take advantage of inheritance of scope in Nested controllers, one has to define Controllers one into another using ng-controller attribute. Sometimes you don’t want to define controllers like this but still want to use power of inheritance within controllers. May be you want to put common logic into BaseController and use it in all the child controllers.
In order to achieve this, we must use $injector object that AngularJS provides.
<div ng-controller="BMWController">
     
    My name is {{ name }} and I am a {{ type }}
 
    <button ng-click="clickme()">Click Me</button>
 
</div>
     
 
<script>
function CarController($scope) {
  
    $scope.name = 'Car';
    $scope.type = 'Car';
  
    $scope.clickme = function() {
        alert('This is parent controller "CarController" calling');
    }
 
}
  
function BMWController($scope, $injector) {
     
    $injector.invoke(CarController, this, {$scope: $scope});
     
    $scope.name = 'BMW';
  
}
</script>

5.1. Online Demo

 

No comments:

Post a Comment