directive-base.js

angular.module('com.namespace.directives').directive('baseDir', ['$compile', 'baseDirNamespace', baseDirFactory]);

function baseDirFactory($compile, baseDirNamespace) {

    return new baseDirNamespace.BaseDirCore($compile);
}

angular.module('com.namespace.directives').factory('baseDirNamespace', baseDirNamespace);

function baseDirNamespace() {

    function BaseDirCore($compile) {
        // Class constructor function
        //...
    }
    
    $.extend(true, BaseDirCore.prototype, {
        // Shared members
        //...
    });

    return {
        BaseDirCore: BaseDirCore
    };

}

directive-derived.js

angular.module('com.namespace.directives').directive('derivedDir', ['$compile', 'derivedDirNamespace', derivedDirFactory]);

function derivedDirFactory($compile, derivedDirNamespace) {

    return new derivedDirNamespace.DerivedDirCore($compile);
}

angular.module('com.namespace.directives').factory('derivedDirNamespace', ['baseDirNamespace', derivedDirNamespace]);

function derivedDirNamespace(baseDirNamespace) {

    var BaseDirCore = baseDirNamespace.BaseDirCore;  // alias 

    function DerivedDirCore($compile) {
        // Class constructor function
        //...
    }

    // setup inheritance chain, with one of the many helpers found on the web
    DerivedDirCore.inheritsFrom(BaseDirCore);

    $.extend(true, DerivedDirCore.prototype, {
        // Shared members
        //...
    });

    return {
        DerivedDirCore: DerivedDirCore
    };

}

Directives Inheritance

Reusing an AngularJS Directive core code. The idea is to:  

** 1. conceal the actual directive behaviour in a separate JS "class", 
** 2. store that in an Angular service, 
** 3. inject that service into an Angular directive, 
** 4. just have the directive factory function return the constructed instance of the "class".

That is to separate the directive core code from the actual directive factory. 
Then one actually wants to inherit a directive core "class" from another. It's not really a matter of JS inheritance, but more on how to inject one into the other by means of Angular modules, without actually instantiating none of them until needed, 

Here are the steps to put inheritance in place:
** 1. store the base directive core code in an Angular service, by actually storing the class as a public property of the service, 
** 2. inject the base code service into the derived code service
** 3. in derived code service, grab the base class as a public property and use that to build up the inheritance chain

inheritsFrom.js

(function () {
    'use strict';
    
    // This is just a classic implementation, with comments, 
    // of a 'helper' to obtain prototypical inherithance in JavaScript

    // Get a dummy 'class' whose constructor has no side effects, 
    // so the class can be instantiated without issues, and that
    // adds no members, so not to be 'transparent' inherithance-wise
    function ParentWrapper() { }

    function extend(baseClass, derivedClass) {

        // Copy prototype from base class to wrapper
        ParentWrapper.prototype = baseClass.prototype;

        // Complete inherithance chain by setting wrapper as derived class prototype 
        derivedClass.prototype = new ParentWrapper();

        // Remember the constructor property was set wrong, let's fix it
        derivedClass.prototype.constructor = derivedClass;

        // Allow invoking base (prototype) members
        derivedClass.prototype._super = baseClass.prototype;
    }

    Function.prototype.inheritsFrom = function (parentClassOrObject) {
        extend(parentClassOrObject, this);
    }

})();