我正在研究一个角度项目的核心,并希望将行为尽可能地分开,以便跨多个组件重用.一个例子可能是使用’iScroll’库来提取 – 刷新一些内容.目前,我遇到了问题,因为许多这些行为都需要自己的范围.我认为将服务中的行为包裹起来可能是可行的方法,但我还没有真正看到很多这类事情的例子.所以我想知道这是否是正确的方法.这是一个非常非常简单的jsfiddle示例：
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和示例代码.
<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>'
}
});
