Sorry for the lengthy explanation - I hope it doesn't deter too many readers. While my current setup is functional, I'm unsure if it's the most optimal way to go about things. Therefore, I'm seeking some guidance.
I have a webpage where I utilize the window size to determine the placement of a varying number of elements. These elements are spread out based on the window's dimensions, and I then use the Canvas element to draw lines connecting each element to a central point.
The challenge I face is determining when all elements have been generated and are prepared for resizing and repositioning.
The structure of my HTML looks like this:
<div class="panel">
<div class="panel_content">
<div class="input_mapping" ng-repeat="input in inputs" mapping-resize>
{{input.name}}
</div>
</div>
</div>
<div class="panel">
<div class="panel_content">
<div class="central_mapping">
{{mapping.name}}
</div>
</div>
</div>
<div class="panel">
<div class="panel_content">
<div class="output_mapping" ng-repeat="output in outputs" mapping-resize>
{{output.name}}
</div>
</div>
</div>
To resize everything, I am using the directive mapping-resize, which triggers for each ng-repeat. Ideally, I want it to run only once, after all child elements have been created. However, if I place the directive on the parent div (panel_content), it does not recognize the child elements at that stage of execution and therefore fails to reposition them.
My current directive code looks like this:
app.directive('mappingResize', ['$timeout', function($timeout) {
return function(scope, elem, attrs) {
if(scope.$last) {
$timeout(function() {
positionElements();
});
}
}
}]);
positionElements() contains all the logic for positioning the elements once they are generated. Although it works well, there might be a more "angular way" to approach it (currently, it relies heavily on jQuery).
In the directive, I employ the $last property to call positionElements() only when it's the last element in the ng-repeat loop, as I require knowledge of all elements to position them correctly. Additionally, I use $timeout to ensure the code runs after the page render.
My question is: could this be optimized further?
Currently, I call positionElements() twice - once for input mappings in ng-repeat and once for output mappings. Ideally, I would prefer to call it just once when all mapping elements are ready. Utilizing $timeout and $last doesn't feel elegant; it seems like there should be an event that signals when the view is completely rendered, yet my search efforts have proved futile.
Any suggestions or advice on the above scenario would be greatly appreciated.