嗨,我是 Angular 动画新手,我需要像这样设置 div 动画 click Here
基于上面的链接,我尝试了 ng-repeat 内 div 的动画,但在执行此操作时出现此错误 未捕获类型错误:无法读取 null(...) 的属性“查询选择器”
。
这是我尝试过的链接FIDDLE HERE
html
<div ng-app="angularSlideables" ng-controller="myctrl">
<div ng-repeat="menu in menuArray">
<div slide-toggle="#derp" ng-click="showItem(menu.displayName);">
<h2><b>{{menu.displayName}}</b></h2>
</div>
<div id="derp" class="slideable" ng-repeat="item in menu.items" ng-show="state">
<span class="md-subhead"><i>{{item.shortDesc}}</i></span>
</div>
</div>
</div>
Controller
angular.module('angularSlideables', [])
.controller('myctrl', function($scope){
$scope.menuArray = [{displayName:'jhon',items:[{shortDesc:'NYC'}]},{displayName:'rock',items:[{shortDesc:'canada'}]},{displayName:'punk',items:[{shortDesc:'Aus'}]}]
})
.directive('slideable', function () {
return {
restrict:'C',
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
});
};
}
};
})
.directive('slideToggle', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var target = document.querySelector(attrs.slideToggle);
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;
});
}
}
});
最佳答案
主要问题是你在 ng-repeat 上有一个 id。 Id 是一个单一值,这意味着不能有两个具有相同 id 的元素。
尝试一下:
<div id="derp">
<div class="slideable" ng-repeat="item in menu.items">
<span class="md-subhead"><i>{{item.shortDesc}}</i></span>
</div>
</div>
它应该可以解决您遇到的错误并帮助您继续使用此功能。
请告诉我是否有帮助:)
关于javascript - Angular 滑动切换动画在 ng-repeat 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40720152/