将基本指令功能扩展到其他指令

Question

我只是想检查一下这个功能在 angularjs 中是否可行。

例如：我有一些通用函数的基本指令，但在我的整个应用程序中，所有指令都需要实现这些函数，因此会发生更多代码重复，我期待与 Java 中的扩展（继承）相同的功能。

是否可以在 angularjs 中实现此功能。

根据我的要求，我无法通过将此代码移动到服务或工厂来归档此函数，因为它就像应用程序中的所有 by 指令都需要在链接上执行此操作，所以现在我所有的指令链接函数容器具有重复代码的相同功能。

我期待为我的所有指令扩展基本指令功能。

[注意] 我的应用程序中的大多数指令都有独立的范围。

Answer 1

答案主要在于 JS 领域，寻找可重用代码的模式是一个很好的挑战。 Angular 得到了 extend、copy 和 merge，但仅此而已，模块和 DI 只是绕过 ES5 限制的方法。

这里是关于如何从指令定义对象创建 mixin 的提示。

app.directive('blockBase', function () {
    return {
        link: function (scope, element, attrs) {
            scope.title = 'block';
        }
    };
});

app.directive('brickBase', function () {
    return {
        restrict: 'E',
        scope: true,
        link: function (scope, element, attrs) {
            // ...
        }
    };
});

app.directive('block', function (blockBaseDirective, brickBaseDirective) {
    var blockDirective = angular.extend(brickBaseDirective[0], {
        name: 'brick',
        restrict: 'EA',
        scope: {
            title: '='
        }
    });

    blockDirective.compile = function (element, attrs) {
        // ...
        return {
            post: function (scope, element, attrs) {
                blockBaseDirective[0].link(scope, element, attrs);
                scope.title += ' offspring';
            }
        };
    };

    return blockDirective;
});

你应该自己决定这种方法是否比装饰器更好。

在控制器/指令定义之外使用命名函数是摆脱重复代码的流行方法，而不是一种优雅的方法。当然，您可以在具有自定义 DDO 属性的指令之间共享函数或类。但是，工厂仍然更适合。