Question

我只想检查angularjs中是否可以使用此功能。

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

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

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

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

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

Answer 1

答案主要在于JS域，找到可重用代码的模式是一个很好的挑战。 Angular得到extend，copy和merge，但是所有，模块和DI都是解决ES5限制的方法。

这里提示如何从指令定义对象创建mixins。

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属性在指令之间共享函数或类。但是，工厂仍然更适合。

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

1 个答案: