Run jQuery after Angular is being rendered

Question

I am trying to populate a profile page with a json object in angularjs. I use directives for this. I have a profile directive in which there are child profile directives. A profile section has subnet profiles as children. I need to run the fragment just before angular starts compiling and only after angular has finished rendering the template.

I tried

app.run() $timeout $evalAsync $(document).ready() $scope.$broadcast postLink function 

This is the skeleton of my code

  var app = angular.module("profile",[]); app.controller("profileController",['$scope',function($scope){ var ctrl = this; }]) .controller("profileSectionController",['$scope',function($scope){ //$scope.$emit('dataloaded'); }]) .directive("profile",[function(){ return { transclude:true, restrict:'EA', replace:true, templateUrl:'/sstatic/angular_templates/de/profile.html', scope:{ person:"=" }, controller:'profileController', compile:function(elem,attrs,transclude){ return { pre : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); //$(elem).css({"display":"none"}); }, post : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); //$(elem).css({"display":"block"}); } } } } }]) .directive("profileSection",[function(){ return { transclude:true, restrict:'EA', replace:true, require:'^profile', templateUrl:'/sstatic/angular_templates/de/profile-section.html', scope:{ title:"@", right:"=", sub:"=" }, controller:"profileSectionController", compile:function(elem,attrs,transclude){ return { pre : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); }, post : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); } } } } }]) .directive("profileSub",[function(){ return { transclude:true, restrict:'EA', replace:true, require:'^profile', templateUrl:'/sstatic/angular_templates/de/profile-sub-section.html', scope:{ subsection:"=" }, controller:function(){ }, compile:function(elem,attrs,transclude){ return function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); } } } }]) 

However, most of them start after loading the profile, but not after loading its children. I cannot attach it to children, because it works too many times.

This is the expected timeline of events.

 Start Render Event Fires Profile Linked Profile Section 1 Linked Profile Sub Section 1 Linked Profile Sub Section 2 Linked Profile Section 2 Linked Profile Sub Section 1 Linked Profile Sub Section 2 Linked Profile Sub Section 3 Linked .... End Render Event Fires 

This is how it is happening now.

 Start Render Event Fires Profile Linked End Render Event Fires Profile Section 1 Linked Profile Sub Section 1 Linked Profile Sub Section 2 Linked Profile Section 2 Linked Profile Sub Section 1 Linked Profile Sub Section 2 Linked Profile Sub Section 3 Linked .... 

I need some way to run the script after each angular load in the DOM.

Please, help. Very much appreciated.

Answer 1

First of all, many thanks to @pixelbits.

I understood how directory loading works. Based on the answer of the pixels, I did this,

• When the children of a large child are loaded, I indicate the profile directive through the emission event that a new subsection has come to p.
• After the unit has been displayed, I use $ timeout to emit another to tell the profile directive that this section has been provided.

Since compilation is done before rendering, I can check the renderedCount in the profile directive and when it is equal to childCount, I can be what every great child has had. This is when I run. I need jquery code.

Final snippet

 var app = angular.module("profile",[]); app.controller("profileController",['$scope',function($scope){ var ctrl = this; }]) .controller("profileSectionController",['$scope',function($scope){ }]) .controller("profileSubSectionController",['$scope',function($scope){ //I emit an event telling the parent Profile directive to tell that a new sub section is in the page. $scope.$emit("compiled"); }]) .directive("profile",[function(){ return { transclude:true, restrict:'EA', replace:true, templateUrl:'/sstatic/angular_templates/de/profile.html', scope:{ person:"=" }, controller:'profileController', compile:function(elem,attrs,transclude){ return { pre : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); //this runs before everything in this chain $(elem).css({"display":"none"}); }, post : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); //I count the profileSubSection children here var childCount = 0; scope.$on("compiled",function(msg){ childCount++; console.log(childCount); }); //I check if all the profile subsections have rendered. If yes I run the script. var renderedCount = 0; scope.$on("rendered",function(msg){ renderedCount++; if(renderedCount<childCount){ }else{ //this runs after everything console.log("now showing profile"); $(".loading").hide(); $(elem).css({"display":"block"}); } }); } } } } }]) .directive("profileSection",[function(){ return { transclude:true, restrict:'EA', replace:true, require:'^profile', templateUrl:'/sstatic/angular_templates/de/profile-section.html', scope:{ title:"@", right:"=", sub:"=" }, controller:"profileSectionController", compile:function(elem,attrs,transclude){ return { pre : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); }, post : function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); } } } } }]) .directive("profileSub",[function(){ return { transclude:true, restrict:'EA', replace:true, require:'^profile', templateUrl:'/sstatic/angular_templates/de/profile-sub-section.html', scope:{ subsection:"=" }, controller:"profileSubSectionController", compile:function(elem,attrs,transclude){ return function link(scope,elem,attrs,ctrl){ //angular.element(elem).find(".candidate-name").append(scope.person.name); $timeout(function(){ console.log("subsection loaded"); //Now the sub section emits another event saying that it has been rendered. scope.$emit("rendered"); }); } } } }]) 

Answer 2

Before compilation

 app.run(function() { ... }); 

After compilation before binding

 app.controller('ctrl', function($scope) { ... }); 

After binding before rendering

 app.directive('body', function() { return { restrict: 'E', link: function(scope, element, attr) { ... } } }); 

After rendering

 app.directive('directive', function($timeout) { return { link: function(scope, element, attr) { $timeout(function() { ... }); } } });