将基本指令功能扩展到其他指令 [英] Extending base directive functionality to other directives

问题描述

我只是想检查一下angularjs是否可以使用此功能.

I just wanted to check is this functionality is possible in angularjs.

例如:我有一些通用功能的基本指令，但是在我的整个应用程序中，所有指令都需要实现此功能，因此会发生更多的代码重复，我希望它与Java中的extend(inheritance)具有相同的功能.

Eg: I have base directive with some common functions but in my whole application all the directives need this functions to be implemented so more code duplication occurs, I am expecting same functionality as extends(inheritance) in Java.

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

Is it possible to achieve this functionality in angularjs.?

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

As per my requirement i can't archive this function by moving this code to services or factory because it is like all of by directives in the application need to perform this operation on linking, so now all of my directive link function container same functionality with duplicate code.

我期望为我的所有指令扩展基本指令功能.

I am expecting something like extending base directive functionality for all my directives.

[注意] 我的应用程序中的大多数指令都具有隔离范围.

[Note] Most of the directives in my application has isolated scope.

推荐答案

答案主要在于JS域，为可重用代码找到模式是一个很好的挑战. Angular获得了extend，copy和merge，但仅此而已，模块和DI只是解决ES5局限性的方法.

The answer primarily lies in JS domain, and finding patterns for reusable code is a good challenge. Angular got extend, copy and merge, but that's all, modules and DI are just ways to get around the limitations of ES5.

这是有关如何从指令定义对象创建mixin的提示.

Here's a hint on how you can create mixins from directive definition objects.

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;
});

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

You should decide for yourself if this approach looks better than decorators.

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

Using named functions outside of controller/directive definitions is popular way to get rid of duplicate code, not an elegant one. And of course you can share functions or classes among directives with custom DDO properties. However, factories are still more suitable for that.

这篇关于将基本指令功能扩展到其他指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！