What’s the recommended way to extend AngularJS controllers?

by

Perhaps you don’t extend a controller but it is possible to extend a controller or make a single controller a mixin of multiple controllers.

module.controller('CtrlImplAdvanced', ['$scope', '$controller', function ($scope, $controller) {
    // Initialize the super class and extend it.
    angular.extend(this, $controller('CtrlImpl', {$scope: $scope}));
    … Additional extensions to create a mixin.
}]);

When the parent controller is created the logic contained within it is also executed.
See $controller() for for more information about but only the $scope value needs to be passed. All other values will be injected normally.

@mwarren, your concern is taken care of auto-magically by Angular dependency injection. All you need is to inject $scope, although you could override the other injected values if desired.
Take the following example:

(function(angular) {

	var module = angular.module('stackoverflow.example',[]);

	module.controller('simpleController', function($scope, $document) {
		this.getOrigin = function() {
			return $document[0].location.origin;
		};
	});

	module.controller('complexController', function($scope, $controller) {
		angular.extend(this, $controller('simpleController', {$scope: $scope}));
	});

})(angular);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>

<div ng-app="stackoverflow.example">
    <div ng-controller="complexController as C">
        <span><b>Origin from Controller:</b> {{C.getOrigin()}}</span>
    </div>
</div>

Although $document is not passed into ‘simpleController’ when it is created by ‘complexController’ $document is injected for us.

More Related Contents:

  1. capitalize the first letter and the letter followed by a dot(.) using angular js
  2. “Thinking in AngularJS” if I have a jQuery background? [closed]
  3. AngularJS : Initialize service with asynchronous data
  4. AngularJS ui-router login authentication
  5. Way to ng-repeat defined number of times instead of repeating over array?
  6. AngularJS ng-click stopPropagation
  7. Set HTTP header for one request
  8. What is the $$hashKey added to my JSON.stringify result
  9. Django csrf token + Angularjs
  10. Protractor set global variables
  11. Using $window or $location to Redirect in AngularJS
  12. ChartJS – Different color per data point
  13. Customizing the template within a Directive
  14. How to handle file downloads with JWT based authentication?
  15. How to make a preselection for a select list generated by AngularJS?
  16. What happens with $q.all() when some calls work and others fail?
  17. angular directive ignore non-numeric input
  18. ng-selected not working in select element
  19. Confirmation dialog on ng-click – AngularJS
  20. Hide Angular UI Bootstrap popover when clicking outside of it
  21. Angularjs minification using grunt uglify resulting in js error
  22. How to change colours for Angular-Chart.js
  23. Genuinely stop a element from binding – unbind an element – AngularJS
  24. Show pop-ups the most elegant way
  25. AngularJS: lazy loading controllers and content
  26. Is it a bad practice to use jQuery in Angular? [closed]
  27. Rename Object Key in an array using javascript
  28. Function Called Multiple Times in AngularJS Repeat Section
  29. Load static JSON file in Webpack
  30. Decode HTML entity in Angular JS

Leave a Comment