How can I create a custom directive in AngularJS until it displays ng-repeat?
What is the problem I encountered: initializing the directive before displaying the li elements, so the DOM is not ready and the block height is not calculated correctly.
This is my code.
Angularjs
.directive('navCollapse', function(){ return { restrict: 'A', scope: { navItems: '=', navScrollOn: '=' }, link: function($scope, $element, $attrs) { var $navList = $element.find('ul'), navItemsChildren = $navList.children('li'), navItemsChildrenDefault = navItemsChildren.get(), navItemsChildrenGet = navItemsChildren.get(), showItems = ($scope.navItems !== undefined) ? $scope.navItems : 6, showItemsOnScroll = ($scope.navItems !== undefined) ? $scope.navScrollOn : navItemsChildren.length, isCollapsed = false, calculateHeight = navItemsChildren.outerHeight() * showItems, calculateFullHeight = navItemsChildren.outerHeight() * showItemsOnScroll; $navList.wrap('<div class="links-wrap" style="max-height:'+ calculateHeight +'px"></div>'); function sortNav(element) { element.sort(function(a,b){ var keyA = $(a).find('a').text(); var keyB = $(b).find('a').text(); if (keyA < keyB) return -1; if (keyA > keyB) return 1; return 0; }); } $element.find('.show-more').on('click', function(e) { var linksWrap = $('.links-wrap'); if (isCollapsed === false) { isCollapsed = true; sortNav(navItemsChildrenGet); $navList.empty(); $.each(navItemsChildrenGet, function(i, li){ $navList.append(li); }); linksWrap.css({ 'max-height' : calculateFullHeight + 'px', 'overflow' : 'auto' }); } else { isCollapsed = false; $navList.empty(); $.each(navItemsChildrenDefault, function(i, li){ $navList.append(li); }); linksWrap.css('max-height', calculateHeight+'px'); linksWrap.css('overflow', 'hidden'); } }); }}})
HTML
<div class="links links-btn-more"> <div ng-controller="categoriesCtrl" nav-collapse nav-scroll-on="10" nav-items="4"> <h4>Categories</h4> <hr> <ul> <li ng-repeat="cat in categories.aList"> <a ui-sref="collections({categoryId:cat.id})" title="">{{cat.name}} </a> </li> </ul> <button class="btn show-more"></button>
source share