Javascript 角度滑动toogle动画在ng repeat内不工作？

嗨，我是角动画新手，我需要像这样设置div的动画

基于上面的链接，我尝试了ng repeat中div的动画，但在执行此操作时出现了此错误

未捕获类型错误：无法读取null（…）的属性“query Selector”

。 这是我尝试的链接

html

{{menu.displayName}
{{item.shortDesc}}

控制器

angular.module（'angularlideables'，[]）
.controller（'myctrl'，函数（$scope）{
$scope.menuArray=[{displayName:'jhon'，items:[{shortDesc:'NYC'}]}，{displayName:'rock'，items:[{shortDesc:'canada'}]}，{displayName:'punk'，items:[{shortDesc:'Aus'}]}]
})
.directive（'slideable'，function（）{
返回{
限制：'C'，
编译：函数（元素，属性）{
//包装标签
var contents=element.html（）；
html（“”+内容+“”）；
返回函数postLink（范围、元素、属性）{
//默认属性
attrs.duration=（！attrs.duration）？“1s”：attrs.duration；
attrs.easing=（！attrs.easing）？“ease in out”：attrs.easing；
element.css({
“溢出”：“隐藏”，
“高度”：“0px”，
“transitionProperty”：“height”，
“transitionDuration”：属性持续时间，
“TransitionTimeingFunction”：属性
});
};
}
};
})
.directive（'slideToggle'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var target=document.querySelector（attrs.slideToggle）；
attrs.expanded=false；
元素绑定（'单击'，函数（）{
var content=target.querySelector（'.slideable_content'）；
如果（！属性已展开）{
content.style.border='1px实心rgba（0,0,0,0）'；
变量y=content.clientHeight；
content.style.border=0；
target.style.height=y+'px'；
}否则{
target.style.height='0px'；
}
attrs.expanded=！attrs.expanded；
});
}
}
});

主要问题是您在ng repeat上有一个id。Id是一个singleton值，这意味着不能有两个具有相同Id的元素

试试看：

<div id="derp">
  <div class="slideable" ng-repeat="item in menu.items">
    <span class="md-subhead"><i>{{item.shortDesc}}</i></span>
  </div>
</div>

{{item.shortDesc}}

它应该可以解决您所遇到的错误，并帮助您继续使用此功能

---

如果有帮助，请告诉我：）

主要问题是您在ng repeat上有一个id。Id是一个singleton值，这意味着不能有两个具有相同Id的元素

试试看：

<div id="derp">
  <div class="slideable" ng-repeat="item in menu.items">
    <span class="md-subhead"><i>{{item.shortDesc}}</i></span>
  </div>
</div>

{{item.shortDesc}}

它应该可以解决您所遇到的错误，并帮助您继续使用此功能

---

如果有帮助，请告诉我：）

什么是目标元素？什么是目标元素？

<div id="derp">
  <div class="slideable" ng-repeat="item in menu.items">
    <span class="md-subhead"><i>{{item.shortDesc}}</i></span>
  </div>
</div>