我复制了一个指令(并且正在工作),以便在单击时滑入滑出隐藏区域,类似于 jQuery 隐藏和显示。
然而,这只适用于元素在一起的情况,例如:
<div slider-toggle>Click to show.hide</div>
<div slider>
Stuff to show and hide
</div>
但是,如果元素不彼此相邻怎么办,例如
<ul>
<li>
<p>My list header</p>
<span slider-toggle>Show</span>
</li>
<li slider>
<p>Are to hide and show</p>
</li>
</ul>
这不起作用,并且控制台中出现错误。
指令:
angular.module('app', [])
.directive('sliderToggle', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
var target = element.next()[0];
attrs.expanded = false;
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
}
}
})
.directive('slider', function () {
return {
restrict:'A',
compile: function (element, attr) {
// wrap tag
var contents = element.html();
element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
return function postLink(scope, element, attrs) {
// default properties
attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
element.css({
'overflow': 'hidden',
'height': '0px',
'transitionProperty': 'height',
'transitionDuration': attrs.duration,
'transitionTimingFunction': attrs.easing
});
};
}
};
});
看看我的骗子:http://plnkr.co/edit/Qwwhhf2jGlOT1TgvN2TE?p=preview
如何才能让 UL LI
中的示例正常工作?当我调用 slider-toggle
时,有什么方法可以传入 ID 或类来告诉指令要隐藏/显示哪个元素?
更新:
<ul>
<li ng-repeat-start="pending in MyData track by $index" slider-toggle target="pending+$index">
<p>My list header</p>
<span slider-toggle>Show</span>
</li>
<li <li ng-repeat-end="" slider id="pending+$index">
<p>Are to hide and show</p>
</li>
</ul>
我也尝试过 {{ending+$index }}
最佳答案
您可以使用要切换的元素的 ID。这将为您提供更大的灵 active :
指令变更:
.directive('sliderToggle', function($document) { //inject $document, can use document as well but I prefer to stick to the angular services
....
scope: {
target: "@"
},
link: function(scope, element, attrs) {
var target = angular.element($document[0].querySelector("#" + scope.target))[0];
....
HTML 用法:
<ul>
<li>
<p>My list header</p>
<span slider-toggle target="test2">Show</span>
</li>
<li slider id="test2">
<p>Are to hide and show</p>
</li>
</ul>
编辑:更改了指令以适应您的更新。这有点棘手,因为您动态编译 ID,并且当指令初始化时 id 尚未设置,因此它不知道该 DOM 元素。我所做的是使用 $timeout
服务来确保在加载所有元素后发生绑定(bind):
更新了链接指令(还需要注入(inject)$timeout
服务):
link: function(scope, element, attrs) {
var timeoutFunc = function () {
var target = angular.element($document[0].querySelector("#" + scope.target))[0];
attrs.expanded = false;
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
}
$timeout(timeoutFunc, 0);
}
HTML 也需要更新,使用如下:id="{{pending+$index}}"
。与目标相同,您必须使用 {{}}
。顺便说一句,由于您在 li 上使用了 slide-toggle
两次,因此必须稍微更改您的 HTML,这是多余的。
关于javascript - 滑入/滑出目标元素的指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29603716/