javascript - 在指令之间共享公共(public)代码

Question

我正在研究一个 Angular 项目的核心，为了跨多个组件重用，我想尽可能地保持行为分离。一个示例可能是使用“iScroll”库来下拉刷新某些内容。目前，我遇到了问题，因为其中许多行为都需要它们自己的范围。我认为也许将行为包装在服务中可能是可行的方法，但我还没有真正看到过这种事情的很多例子。所以我想知道这是否是正确的方法。这是一个非常非常简单的 jsfiddle 示例:

http://jsfiddle.net/S7kC7/

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

我的想法是公开某些预期的方法(即“链接”、“ Controller ”)，这些方法可以在需要这些行为或功能的其他指令中使用。由于作用域是一个对象并通过引用传递，因此它可以 Hook ，就像刚刚复制/粘贴代码一样。

这样做有问题吗？服务是否可以被视为服务于某种“混入”的东西？再一次，我只是问，因为我还没有真正看到任何这样的例子。

[注意:我不确定，但也许这属于代码审查网站？]

Answer 1

我认为执行此操作的“Angular ”方法是创建一个 scrollingBehavior 指令并将其附加到您的其他指令，必要时进行嵌套。

[编辑] 更新了带有独立作用域的 jsfiddle 和示例代码。

http://jsfiddle.net/8dYYk/

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