[英]Sharing common code between directives
我正在研究一个角度项目的核心,并希望将行为尽可能地分开,以便跨多个组件重用。 一个例子可能是使用'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', ['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);
}
}
}]);
我的想法是,我会暴露某些预期的方法(即“链接”,“控制器”),这些方法可以在需要这些行为或特征的其他指令中使用。 由于作用域是一个对象并通过引用传递,它可以像只是复制/粘贴代码一样挂钩。
这样做有问题吗? 服务可以被视为服务于某种“混合”的东西吗? 再一次,我只是问,因为我没有看到任何类似这样的例子。
[注意:我不确定,但也许这属于代码审查网站?]
我相信这样做的“有角度”方法是创建一个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': '=' },
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>'
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.