I have developed an angularjs directive that has the ability to dynamically generate multiple directives and place them within a specific div element in the DOM. I am encountering an issue where, after creating each directive, I need to determine the size of the enclosing div in order to perform additional manipulations. However, I have observed that upon invoking $compile() to create the directives dynamically, they are not immediately rendered in the DOM.
Is there a way to instruct angularjs to update the DOM promptly following the execution of $compile(), so that I can interact with the DOM thereafter?
Below is a simplified example demonstrating the process:
// Implementation of the wrapping directive
angular.module('myModule').directive('wrapper', function($compile) {
return {
restrict: 'A',
template: '<div></div>',
scope: {
// The scope holds a collection of objects serving as models for the inner directives to be generated
innerModels: '='
},
link: function(scope, element, attrs) {
for (var i=0; i<innerModels.length; i++) {
var innerDirective = $compile('<inner-directive ng-model="innerModels['+i+']"></inner-directive>')(scope);
element.append(innerDirective);
// Obtain the client height of the created 'div'
var divHeight = element[0].clientHeight;
// divHeight now equals 0
// However, upon page load,
// if I inspect the div's clientHeight value through the developer console post loading, it does display a valid value
}
}
};
});
// Definition of the innerDirective
angular.module('myModule').directive('innerDirective', function() {
return {
restrict: 'E',
template: '<span ng-bind-template="{{somethingFromModel}}"></span>',
scope: {
ngModel: '='
},
link: function(scope, element, attrs) {
// Additional logic...
}
};
});
Note: This implementation excludes the use of jQuery (hence, solutions utilizing jQuery are not desired).