Question

我正在研究角度项目的核心，并希望尽可能将行为保持为独立，以便跨多个组件重用。一个例子可能是使用'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);
        }
    }
}]);

我的想法是，我会暴露某些可能在需要这些行为或功能的其他指令中使用的预期方法（即“链接”，“控制器”）。由于作用域是一个对象并通过引用传递，它可以像只是复制/粘贴代码一样挂钩。

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

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

Answer 1

我认为这样做的“角度”方法是创建一个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>'
    }
});

在指令之间共享公共代码

1 个答案: