用于幻灯片放映和隐藏内容的 Angularjs 指令
Angularjs Directive to slide show and hide content
我已经使用带有ng-show和ng-animate的向上/向下滑动效果作为我问题的基础。但是,该指令只允许隐藏/显示一个元素。当有 2 个时,只有第一个显示:
这里有一个笨蛋:http://plnkr.co/edit/YtPgcUcnapiQfAR5hxiE?p=preview
如果单击链接 2,它将显示第一个内容。
angular.module('app', [])
.directive('sliderToggle', function() {
return {
restrict: 'AE',
link: function(scope, element, attrs) {
var target = element.parent()[0].querySelector('[slider]');
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
});
};
}
};
});
缺陷出现在这里:var target = element.parent()[0].querySelector('[slider]');
。此语句element.parent()[0]
将返回当前元素的父元素,该元素将始终<article>
。
进一步:我假设element.parent()[0].querySelector('[slider]')
将根据"querySelector"的文档选择article
的第一个子项:
如果要返回文档中的第一个元素(使用深度优先 文档节点的预序遍历)与 指定的选择器组
在按钮之后选择滑块,则应使用var target = element.next()[0];
。或者var target = element.next('[slider]')[0];
如果不是直接之后;
这是一个笨蛋
希望这有帮助!
快速修复:
http://plnkr.co/edit/uvjNUxzROqBob7ZgCgxh?p=preview
改变
var target = element.parent()[0].querySelector('[slider]');
跟
var target = element.next('[slider]')[0];
相关文章:
- AngularJs指令,该指令创建内部有数据对象的新指令
- AngularJS指令只识别双向绑定类型
- AngularJS指令出错-无法读取属性'编译'的未定义
- AngularJS指令单元测试中未定义的函数
- AngularJS指令,在元素后插入HTML
- AngularJS指令部分应用的函数don'不起作用
- AngularJS指令隔离作用域
- Google Maps API OverlayView()在AngularJS指令中不起作用
- 注入angularjs指令
- AngularJS指令模板开头的注释
- AngularJS 指令的动态选项
- AngularJS指令意外地协同工作
- Angularjs指令如何检测属性中的更改
- AngularJS指令范围约束问题重复出现
- AngularJS指令监视父级大小的更改
- 将click事件绑定到AngularJS指令中的子元素
- 如何使用TypeScript绕过AngularJS指令
- 使用transclude的AngularJS指令破坏了$scope
- AngularJS指令中的动画,事件未启动
- 用于观察高度变化的AngularJS指令