AngularJS Example:
by ladrower
HTML
<div ng-app="App">
<b>Base usage output:</b>
<extendable></extendable>
<hr/>
<b>Extended usage output:</b>
<extendable extended-controller="ExtendedCtrl"></extendable>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<style>
JavaScript
var module = angular.module('App', []);
module.directive('extendable', function() {
return {
restrict: 'E',
scope: {},
template: '<p ng-repeat="log in logs">{{log}}</p>',
controller: [
"$scope", "$element", "$attrs", '$controller',
function ($scope, $element, $attrs, $controller) {
var ctrl = this;
$scope.logs = [];
this.init = function () {
this.doMagic();
};
this.doMagic = function () {
$scope.logs.push('base magic');
};
if (angular.isDefined($attrs.extendedController)) {
(function (baseCtrl, controllerName) {
var proxyCtrl = {},
prop,
value;
ctrl = $controller(controllerName, {
$scope: $scope,
$element: $element,
$attrs: $attrs
});
angular.extend(ctrl.constructor.prototype, baseCtrl);
for (prop in ctrl) {
if (ctrl.hasOwnProperty(prop) && baseCtrl.hasOwnProperty(prop)) {
value = ctrl[prop];
if (angular.isFunction(value)) {
proxyCtrl[prop] = (function (prop, value) {
var _super = function () {
return baseCtrl[prop].apply(baseCtrl, arguments);
};
return function () {
var __super = ctrl.$super,
returnValue;
ctrl.$super = _super;
...