Controller Inheritance 1.0rc3
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc3.js"></script>
<div ng-controller="DerivedController">
Hello, {{name}}!
<br/>
<button ng-click="clickService()">Click Me to use service</button>
<br/>
<button ng-click="clickController()">Click Me to use base controller (Doesnt work yest)</button>
<br/>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.factory('myService', function() {
return {
handleClick: function(scope){
scope.name= 'clicked from service';
}
};
});
function BaseController($scope) {
$scope.name = 'Superhero';
$scope.clickController = function() {
$scope.name = 'Clicked from base controller';
}
}
function DerivedController($scope, myService) {
angular.extend(this, new BaseController($scope));
$scope.clickController = function() {
$scope.name = 'Clicked from DerivedController';
}
//$scope.name = 'Superhero Child';
$scope.clickService = function(){
myService.handleClick($scope);
}
}