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

问题描述

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

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

例如:我有一些带有一些常用功能的基本指令，但在我的整个应用程序中，所有指令都需要实现这些功能，因此会发生更多代码重复，我期待与 Java 中的扩展(继承)功能相同.

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.?

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

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屋！