angularjs:链接函数中范围变量更改后获取元素的高度

时间:2017-08-25 14:08:25

标签: jquery angularjs

我在链接功能

中有一个功能(点击)
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);

只有在控制器中才有可能。

0 个答案:

没有答案