Thursday, October 24, 2019

javascript - angularjs child directive DOM doesn't load fast enough

Hi I have nested directives where I have a parent directive along with its child directives which can be transcluded. My problem is when try to find some dom elements in the parent link function it doesn't return an array unless I set a timeout. It appears the child rendering/transclusion isn't happening fast enough. So is there a way to solve this without using a timeout and then calling find the child elements?





var app = angular.module('plunker', [])
.run(function($templateCache){
$templateCache.put('innerPane.html', "
");

$templateCache.put('slidePaneSelector.html', "

First Inner Pane

Second Inner Pane

");
})
.directive('innerPane', function(){
return {
restrict: 'EA',
transclude: true,
replace: true,
templateUrl: 'innerPane.html',
scope:{},
link: function(scope,element,attr){

}
}
})
.directive('slidePaneSelector', ['$timeout',function($timeout){
return {
restrict: 'EA',
transclude: true,
replace: true,
templateUrl: 'slidePaneSelector.html',
scope:{},
link: function(scope,element,attr){

var firstPaneElement = angular.element(element.find('div')[0]);
var secondPaneElement = angular.element(element.find('div')[1]);

console.log(element.find('div'));

$timeout(function(){
console.log(element.find('div'));
},100);

}
}
}]);







AngularJS Plunker







Hello {{name}}!











Plunker:
http://plnkr.co/edit/sS5cSMboSV2mjlRxsgO8?p=preview

No comments:

Post a Comment

hard drive - Leaving bad sectors in unformatted partition?

Laptop was acting really weird, and copy and seek times were really slow, so I decided to scan the hard drive surface. I have a couple hundr...