Javascript 在指令之间共享公共代码

我正在从事angular项目的核心工作，希望尽可能保持行为的独立性，以便跨多个组件重用。例如，可以使用“iScroll”库进行拉取以刷新某些内容。目前，我遇到了一些问题，因为这些行为中的许多都需要自己的范围。我认为在服务中结束这些行为可能是一种可行的方法，但我还没有看到很多这样的例子。所以我想知道这样做是否正确。下面是一个非常非常简单的JSFIDLE示例：

var controls=angular.module（'controls'，[]）；
controls.service（'ScrollingBehavior'，function（）{
this.link=函数（$scope，$element）{
$element.addClass（'scrolling'）；
}
});
指令（'scrolling'，['ScrollingBehavior'，函数（ScrollingBehavior）{
//假设它有自己的范围
返回{
限制：“A”，
链接：函数（$scope$element）{
log（“链接滚动”）；
ScrollingBehavior.link（$scope，$element）；
}
}
}]);
指令（'panel'，['ScrollingBehavior'，函数（ScrollingBehavior）{
返回{
限制：'E'，
是的，
替换：正确，
模板：“”，
//假设它有自己的范围
链接：函数（$scope$element）{
控制台日志（“链接面板”）；
ScrollingBehavior.link（$scope，$element）；
}
}
}]);

我的想法是，我将公开某些预期的方法（即“link”、“controller”），这些方法可以在需要这些行为或特性的其他指令中使用。由于作用域是一个对象并通过引用传递，因此它可以像复制/粘贴代码一样挂接

这样做有问题吗？服务是否可以被视为某种“混合”服务？再说一次，我问这个问题只是因为我还没有见过这样的例子

---

[注意：我不确定，但这可能属于代码审查网站？]

我认为“角度”的方法是创建一个scrollingBehavior指令，并将其附加到其他指令上，必要时嵌套

[Edit]使用隔离作用域更新了JSFIDLE和示例代码

这应该有一个滚动条
这应该有一个滚动条
这也应该有一个滚动条
指令（'scrollingBehavior'，函数（）{
返回{
限制：“A”，
作用域：{“行为”：“=”}，
链接：函数（$scope$element）{
$element.addClass（'scrolling'）；
}
}
});
controls.directive（'scrolling'，function（）{
//假设它有自己的范围
返回{
限制：“AE”，
作用域：{'otherThing'：'='}，
链接：函数（$scope$element）{
log（“链接滚动”）；
}
}
});
controls.directive（'scrollingWithScrollingBehavior'，function（）{
返回{
限制：“A”，
是的，
作用域：{“行为”：“=”}，
模板：“”
}
});

-这不起作用，因为相当多的行为需要自己的范围。我明白了，在那些情况下，像建议的那样把它们结合起来是行不通的。我会使用嵌套指令，而不是像上面提到的那样使用服务。依我看，更容易理解和陈述。正是@craig Squire说的。。。这仍然在指令的责任范围内，但你需要在这种关系中利用转换，使事情按照你的意愿进行。对你来说更好/更容易的事情和对你的应用程序来说最好的事情是两件完全不同的事情。您的建议是线程使用的噩梦。相反，您需要花一些时间熟悉指令继承、隔离作用域和转换。Angular预见到了这个问题，并为您提供了解决这些问题的工具。你只需要承认，复杂的关系需要一种更复杂、更有计划的方法。有时当程序员很难：）@Stephen最终你需要自己决定什么是正确的路线，因为你知道你正在实现的所有细节，但是使用合理的设计在未来会比现在走捷径来减少开发时间有更大的优势。

var controls = angular.module('controls', []);
controls.service('ScrollingBehavior', function () {
    this.link = function ($scope, $element) {
        $element.addClass('scrolling');
    }
});

controls.directive('scrolling', ['ScrollingBehavior', function (ScrollingBehavior) {
    //pretend that this has its own individual scope
    return {
        restrict: 'A',
        link: function ($scope, $element) {
            console.log("Linking scrolling");
            ScrollingBehavior.link($scope, $element);
        }
    }
}]);

controls.directive('panel', ['ScrollingBehavior', function (ScrollingBehavior) {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        //pretend that this has its own individual scope
        link: function ($scope, $element) {
            console.log("Linking panel");
            ScrollingBehavior.link($scope, $element);
        }
    }
}]);

<div scrolling-with-scrolling-behavior>This should have a scroll bar</div>
<div scrolling><div scrolling-behavior>This should have a scroll bar</div></div>
<panel scrolling-behavior>This should also have a scroll bar</panel>


controls.directive('scrollingBehavior', function () {
    return {
        restrict: 'A',
        scope: { 'behavior': '=' },
        link: function ($scope, $element) {
            $element.addClass('scrolling');
        }
    }
});

controls.directive('scrolling', function () {
    //pretend that this has its own individual scope
    return {
        restrict: 'AE',
        scope: { 'otherThing': '=' },
        link: function ($scope, $element) {
            console.log("Linking scrolling");
        }
    }
});

controls.directive('scrollingWithScrollingBehavior', function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: { 'behavior': '=' },
        template: '<div scrolling-behavior><div scrolling ng-transclude></div><div>'
    }
});