-1

I am trying to keep my angular project as modular as possible. I currently have 3 nested directives that form the base of my project.

The lower most directive will always have the same core functionality and scope objects, but will need additional scope objects and functions depending on the use case. The app is very large so keeping everything as decoupled as possible is important, as well as following the DRY principle.

In python style OOP I would just inherit all the properties and functions then add to them. Is there something similar in Angular?

For Example:

The base

myApp.directive('itemOption', function () {
    return {
        restrict: 'E',
        templateUrl: "item_option.html",
        scope: {
            'lowest': '=',
            'middle': '=',
            'high': '=',
            'ngModel': '=',
        },
        controller: function ($scope) {
            $scope.prop1 = "Default 1"
            $scope.prop2 = "Default 2"
        }
    }
}

A repetitive directive that would be used instead of the base

myApp.directive('itemOptionVariation1', function () {
    return {
        restrict: 'E',
        templateUrl: "item_option.html",
        scope: {
            'lowest': '=',
            'middle': '=',
            'high': '=',
            'ngModel': '=',
        },
        controller: function ($scope) {
            $scope.prop1 = "Default 1"
            $scope.prop2 = "Default 2"

            // Unique to this directive
            $scope.prop900 = "Penguins"
        }
    }
}

And Another

myApp.directive('itemOptionVariation2', function () {
    return {
        restrict: 'E',
        templateUrl: "item_option.html",
        scope: {
            'lowest': '=',
            'middle': '=',
            'high': '=',
            'ngModel': '=',
        },
        controller: function ($scope) {
            $scope.prop1 = "Default 1"
            $scope.prop2 = "Default 2"

            // Unique to this directive
            $scope.prop3 = "This is awesome"
        }
    }
}
Red-Tune-84
  • 381
  • 6
  • 17

1 Answers1

2

You can use require:[^parent_directive1, ^parent_directive2] as a directive attribute. Please check the below example.

myApp.directive('itemOptionVariation2', function () {
    return {
        restrict: 'E',
        templateUrl: "item_option.html",
        require: ['^itemOption', '^itemOptionVariation1'],

This is not exactly inheritance, rather a composition. However, this has resolved my needs.

Aviro
  • 2,125
  • 22
  • 28
  • I see this is a good solution. Can you explain what you mean by composition as opposed to inheritance? I know it solves the problem, I just have trouble always seeing why. – Red-Tune-84 Oct 29 '14 at 13:18
  • It's my understanding as opposed to inheritance in Java, in Angular you have to define the inherited properties and controllers. Refer this conversation and the plunker which gives out more details about the implementation. http://plnkr.co/edit/djNk8PPzXvngZOvAirMu?p=preview http://stackoverflow.com/questions/19111696/scope-inheritance-for-angular-directives – Aviro Oct 29 '14 at 20:53
  • 1
    Thanks @Aviro. Here was my solution, inheriting controllers outside of the directive. https://gist.github.com/Kazanz/379c1dd5507d15ec7977 – Red-Tune-84 Oct 30 '14 at 14:59