我在链接功能
中有一个功能(点击)link: function (scope, el, attr, ctrl) {
scope.isOpen = false;
scope.clicked = function () {
scope.isOpen = !scope.isOpen;
var submenuElem = el[0].querySelector('.sidebar-submenu');
if (scope.isOpen) {
submenuElem.css('height', submenuElem.offsetHeight+'px');
}
};
}
在模板中,我使用ng-class将div的高度更改为auto:
<div class="closedSubMenu sidebar-submenu"
ng-class="{'openedSubMenu' : isOpen}">
<ul ng-transclude></ul>
</div>
和css:
.closedSubMenu {
height: 0;
max-height: 0;
width: auto;
margin: 0;
border-width: 0;
overflow-y: hidden;
-webkit-transition: height 0.5s ease-in-out, max-height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out, max-height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out, max-height 0.5s ease-in-out;
transition: height 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
.openedSubMenu {
height: auto;
border-width: 1px;
margin: 10px 10px 10px 0;
max-height: 400px;
border-color: #f6f7f8;
}
我想在isOpen变量为true之后设置div高度,并且对div类有影响。 在我的代码子菜单Elem.offsetHeight中返回0
我想要一种方式:
$apply(function(){
scope.isOpen = !scope.isOpen;
},10);
只有在控制器中才有可能。