angularjs - Ng-cloak interferes with directive that measures a block dimensions -
i go straight code description.
the directive measures height of block.
<script type="text/javascript"> var rootapp = angular.module('rootapp'); // directive log height. have add on value final height, because css style 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>
the scope value , directive applied html div. gives current height of div
, applied same div
style="max-height: {{'{{maxheightcat}}'}}px;"
. goal have precise height of block animation purpose.
<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>
the problem flickering effect. angular recommend ng-cloak
, helps, breaks directive logheight
.
added ng-cloak
flickering block.
<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>
with no ng-cloak
declared div
, gives me needed height. it, 0px
. $timeout
didn't help. may be, ng-cloak
directive compiled , injected dom last?
working demo
Comments
Post a Comment