I am currently utilizing UI Bootstrap for Angular in one of my projects, and I have developed a directive that encapsulates the collapse functionality from UI Bootstrap. Here is how it looks:
app.directive( 'arSection', ['$timeout', function($timeout) {
return {
template: '<div class="section" ng-class="{\'collapsed\': collapsed, \'open\': !collapsed}">' +
' <h4 ng-click="toggleCollapsed()">' +
' <span class="dropdown-ctrl" ng-class="{\'icon-chevron-right\': collapsed, \'icon-chevron-down\': !collapsed}"></span>{{title}}' +
' </h4>' +
' <div collapse="collapsed" class="section-content">' +
' <div ng-transclude></div>' +
' <div class="clear"></div>' +
' </div>' +
'</div>',
restrict: 'E',
scope: true,
transclude: true,
replace: true,
link: function( scope, elem, attrs ){
scope.title = attrs.title;
// Toggle the open/closed state and save it away
scope.toggleCollapsed = function() {
scope.collapsed = !scope.collapsed;
};
scope.collapsed = true;
}
}
};
} ] );
The issue I am facing is that when expanding the div, the expandDone() method in UI Bootstrap is not being triggered upon completion of the animation.
function expandDone() {
element.removeClass('collapsing');
element.addClass('collapse in');
element.css({height: 'auto'});
}
As a result, the height of the div does not adjust dynamically with the content inside, causing some content to be cut off.
In addition, the collapseDone() method also fails to execute during collapsing.
Interestingly, these methods are only triggered after interacting with another component in the application, which indirectly initiates an apply/digest cycle for the collapse directive and executes the queued callbacks.
I suspect that this behavior is related to Angular scopes or watches, but I am unable to identify the specific connection causing this delay.
UPDATE: I have created a Plunker showcasing the arSection directive, where it functions correctly. Clicking on Section One header triggers the animation to expand. However, in my actual project, the Section Two header does not reposition itself as expected when the content in Section One expands. The overflow of larger content remains unadjusted.
If you inspect the HTML during runtime, you will notice the "collapsing" class being added and removed during animation. While the "collapsing" class is applied in my code, it is not removed until a trigger event forces an apply/digest cycle.