I am currently facing an issue with my custom directive named "connection" that is responsible for drawing connecting lines between two divs based on their ids. These ids are indirectly passed through scope data.
The main challenge I am encountering is that my "connection" directive needs to retrieve the bounding rectangle of the respective DOM elements in order to accurately draw the connecting line with correct coordinates.
However, within the link function of my directive, calling getElementById() for these ids returns undefined. This occurs because the ids of the elements still remain in the format of id="intf-{{intf.id}}" when the connection directive's link function is executed (before interpolation).
The problematic divs were dynamically generated using ng-repeat and had their ids assigned dynamically as well.
Main Query
I am seeking a way to efficiently make my directive wait for the element ids to undergo interpolation and then promptly notify the directive to update its template and/or scope data.
Alternatively, can I expedite the interpolation process so that getElementById() functions correctly before proceeding with the link function?
$observe Approach?
I have come across the method attrs.$observe() to track updates in one's own attribute, but I am unsure how this can be applied to arbitrary element attributes. Additionally, I cannot access the element until its name has been interpolated, as that serves as the only identifier.
Current Workaround
Previously, another developer working on this code introduced the following workaround:
link: function( scope, element, attrs ) {
var deferUntilElementsExist = function( newVal, oldVal, cb ){
var sourceElement = document.getElementById(scope.connection.source().id);
var targetElement = document.getElementById(scope.connection.target().id);
if( !sourceElement || !targetElement ) {
$timeout( function(){ deferUntilElementsExist( newVal, oldVal, cb ); }, 0 );
return;
}
updatePath();
if (cb) {
cb( newVal, oldVal );
}
};
Although this approach partially works, the rendering of lines occurs at a slow pace, generating about 5 lines per second even when dealing with hundreds of them, resembling a single-line processing cycle per update.
Your insights and suggestions would be greatly appreciated.