在Angular完成渲染后运行jQuery

我正在尝试使用angularjs中的json对象填充配置文件页面。 我正在使用指令。 我有一个配置文件指令，其中有profile-section指令作为子节点。 配置文件部分具有作为子项的配置文件子部分指令。 我需要在角度开始编译之前和角度完成渲染模板之后运行一个片段。

我试过了

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

这是我的代码的骨架

  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); } } } }]) 

但是，它们中的大多数在加载profile指令后触发，但在其子节点加载后不会触发。 我不能把它附在孩子身上，因为它会发射太多次。

这是事件的预期时间表。

 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 

这就是现在的情况。

 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 .... 

在DOM的每一部分角度加载完成后，我需要一些运行脚本的方法。

请帮忙。 非常感激。

Answer 1

在编译之前

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

在链接之前编译之后

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

在渲染之前链接之后

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

渲染后

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

Answer 2

首先，非常感谢@pixelbits。

我理解指令加载是如何工作的。 根据pixelbits的回答我做的是，

• 当一个子子部分加载时，我通过emit事件告诉Profile Directive，新的子部分已经到达页面。
• 在子部分渲染之后，我使用$ timeout发出另一个事件来告诉Profile指令该子部分已呈现。

由于编译发生在渲染之前，我可以检查Profile Directive中的renderedCount，当它等于childCount时，我可以确定每个大孩子都已渲染。 这是我触发我需要的jquery代码的时候。

最后的片段

 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