Question

我直接进入代码说明。

指示块高度的指令。

<script type="text/javascript">
var rootApp = angular.module('rootApp');

// Directive to log a height. We have to add on some value to a final height, because css style will be undefined.

rootApp.directive('logHeight', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.prepMaxHeight = element.prop('offsetHeight');
            scope.value = 0;
            $timeout(function() {
                scope.maxHeight = scope.value + scope.prepMaxHeight;
            }, 0);
        }
    };
}]);
</script>

适用于html div的范围值和指令。它给出了div的当前高度，该高度应用于与div相同的style="max-height: {{'{{maxHeightCat}}'}}px;"。目标是为了动画目的而具有块的精确高度。

<md-button ng-href="#" ng-click="showAccordion = ! showAccordion" md-no-ink>
   <span>
        Accordion button
   </span>
</md-button>

<div class="accordion-wrapper" ng-class="{ 'hidden': ! showAccordion }" log-height style="max-height: {{maxHeight}}px;"> 
   <div class="accordion-inner-wrapper" ng-class="{ 'animate': showAccordion }"> 
       <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
       </ul>
   </div>
</div>

问题是闪烁效果。 Angular建议ng-cloak，这有助于，但也违反我的指令logHeight。

将ng-cloak添加到闪烁的块中。

<div class="accordion-wrapper" ng-class="{ 'hidden': ! showAccordion }" log-height style="max-height: {{maxHeight}}px;" ng-cloak> 
   <div class="accordion-inner-wrapper" ng-class="{ 'animate': showAccordion }"> 
       <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
       </ul>
   </div>
</div>

ng-cloak没有声明div，它给了我所需的高度。有了它，我得到0px。 $timeout没有帮助。可能是，ng-cloak指令被编译并作为最后一个注入DOM？

工作demo

Ng-cloak干扰测量块尺寸的指令

0 个答案: