AngularJS controller inherits from another controller

in controller inheritance in angularjs, scope nested scope is commonly used. by default, when a property cannot be found in the current scope, it will be searched in the parent scope. if it cannot be found, it will be searched until $rootscope is found.

but in some cases, the rootscope is our controller, and it is impossible to write a large number of public attribute methods into the rootscope.

for example, if there are multiple similar pages with elements such as breadcrumbs, search bars, toolbars, tables, etc. if elements such as breadcrumb tables are considered to be made into directives, then there will inevitably be many similar configurations. it needs to be passed from the controller to the component, and many tool methods will be generated for processing data. at this time, it is obviously ugly to repeatedly write the same code in the controller of each page, so inheritance is needed.

i found a solution on stackoverflow. it turns out that angularjs has already taken this situation into consideration and provided $controller

var app = angular.module('angularjs-starter', []); 
app.controller('ParentCtrl ', function($scope) {
// I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $controller) {
$controller('ParentCtrl', {$scope: $scope}); //This works
});

above the above is the relevant knowledge that the editor introduces to you about the angularjs controller inheriting from another controller. i hope it will be helpful to you!