javascript – 在指令之间共享公共代码

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

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

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

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

解决方法

我相信这样做的“有角度”方法是创建一个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': '=' },$element) {
            $element.addClass('scrolling');
        }
    }
});
 
controls.directive('scrolling',function () {
    //pretend that this has its own individual scope
    return {
        restrict: 'AE',scope: { 'otherThing': '=' },$element) {
            console.log("Linking scrolling");
        }
    }
});
 
controls.directive('scrollingWithScrollingBehavior',template: '<div scrolling-behavior><div scrolling ng-transclude></div><div>'
    }
});

javascript – 在指令之间共享公共代码

解决方法

猜你在找的JavaScript相关文章