在Angular中继承指令

Question

我试图让我的角度项目尽可能模块化。我目前有3个嵌套指令，它们构成了我项目的基础。

最低指令将始终具有相同的核心功能和范围对象，但根据用例需要其他范围对象和函数。该应用程序非常庞大，因此尽可能将所有内容保持分离非常重要，并遵循DRY原则。

在python样式的OOP中，我将继承所有属性和函数，然后添加到它们。 Angular中有类似的内容吗？

例如：

基地

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"
        }
    }
}

将使用重复的指令代替基础

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"
        }
    }
}

和另一个

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"
        }
    }
}

Answer 1

您可以使用要求：[^ parent_directive1，^ parent_directive2] 作为指令属性。请查看以下示例。

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

这不是完全继承，而是一种组合。但是，这已经解决了我的需求。