在AngularJS完成渲染HTML之后运行jQuery代码

在控制器中,我使用$ http或$ resource服务获取一些JSON数据。 然后我把这个数据写在$ scope中,AngularJS更新页面的HTML结构。 我的问题是,我需要知道是什么新的大小(宽度和高度)的列表(我的意思是,HTML DOM元素)充满Angular ng-repeat指令。 因此,我必须在Angular完成更新DOM结构之后运行JavaScript代码。 什么是正确的方法来做到这一点? 我在过去的四个小时里search了互联网,但是我找不到解决我的问题的方法。

这是我如何接收JSON数据:

 var tradesInfo = TradesInfo.get({}, function(data){ console.log(data); $scope.source.profile = data.profile; $scope.trades = $scope.source.profile.trades; $scope.activetrade = $scope.trades[0]; $scope.ready = true; init(); //I need to call this function after update is complete }); 

这是init()函数中发生的事情:

 function init(){ alert($('#wrapper').width()); alert($('#wrapper').height()); } 

我知道这个问题一定有一些容易解决的问题,但我现在不能find它。 提前致谢。

其实在这种情况下,angular度的方式不是简单的方法,但唯一正确的方法:)

你必须写一个指令,并附加到你想知道的高度的元素。 从控制器中,您可以播放一个事件,该命令会捕获事件,并且您可以执行DOM操作。 从来没有在控制器。

 var tradesInfo = TradesInfo.get({}, function(data){ console.log(data); $scope.source.profile = data.profile; ... $scope.$broadcast('dataloaded'); }); directive('heightStuff', ['$timeout', function ($timeout) { return { link: function ($scope, element, attrs) { $scope.$on('dataloaded', function () { $timeout(function () { // You might need this timeout to be sure its run after DOM render. element.width() element.height() }, 0, false); }) } }; }]); 

Olivér的答案是好的,但有一个问题:如果您忘记广播事件,您的JavaScript将不会运行,而您的数据可能已经改变。 另一个解决scheme是观察范围的变化,例如:

 var tradesInfo = TradesInfo.get({}, function(data) { console.log(data); $scope.profile = data.profile; // ... }); directive('heightStuff', ['$timeout', function($timeout) { return { scope: { myData: '=' }, link: function($scope, element, attrs) { $scope.$watch('myData', function() { $timeout(function() { // You might need this timeout to be sure its run after DOM render. element.width() element.height() }, 0, false); }) } }; } ]); 
 <div height-stuff my-data="profile"></div> 

这样, 每次数据更改时都会调用javascript函数,而不需要任何自定义事件。

另一个使用JQuery的build议。 必须通过在指令中生成的网格来完成此工作。 我想滚动到网格中的特定行。 使用$ emit从指令向父控制器广播:

在控制器中:

  ['$timeout',function($timeout){ ... $scope.$on('dataloaded', function () { $timeout(function () { // You might need this timeout to be sure its run after DOM render. $scope.scrollToPosition(); }, 0, false); }); $scope.scrollToPosition = function () { var rowpos = $('#row_' + $scope.selectedActionID, "#runGrid").position(); var tablepost = $('table', "#runGrid").position(); $('#runGrid').scrollTop(rowpos.top - tablepost.top); } 

在指令中

 .directive('runGrid',['$timeout', function ($timeout) { // This directive generates the grip of data return { restrict: 'E', //DOM Element scope: { //define isolated scope list: '=', //use the parent object selected: "=" }, templateUrl: '/CampaignFlow/StaticContent/Runs/run.grid.0.0.0.0.htm', //HTML template URL controller: ['$scope', function ($scope) { //the directive private controller, whith its private scope //$scope.statusList = [{ data_1: 11, data_2: 12 }, { data_1: 21, data_2: 22 }, { data_1: 31, data_2: 32 }]; //Controller contains sort functionallity $scope.sort = { column: null, direction: 1 } $scope.column = null; $scope.direction = "asc"; $scope.sortColumn = function (id) { if(id!=$scope.column) { $scope.column = id; $scope.direction = "asc"; } else { $scope.column = null; } } $scope.toggleDir = function () { $scope.direction = ($scope.direction == "asc") ? "desc" : "asc"; } $scope.$emit('dataloaded'); }] }; }]) 

这是网格指令html模板的一个片段:

  <div style="overflow-y:auto;height: 200px;" id="runGrid"> <table class="table table-striped" style="table-layout:fixed"> <tbody> <tr ng-repeat="status in list" id="row_{{status.action_id}}" ng-class="(status.action_id==selected)?'selected':''"> <td> 

列表和选定的参数是从使用该指令的html注入的

 <run-grid list="list" selected="selectedActionID"></run-grid> 

我想补充一个答案,因为前面的答案认为,在完成ngRepeat之后需要运行的代码是一个angular码,在这种情况下,所有的答案都给出了一个很好而简单的解决scheme,以及万一重要的消化生命周期阶段,你可以看看Ben Nadel的博客,除了使用$ parse而不是$ eval。

但是根据我的经验,正如OP所说,通常在最终编译的DOM上运行一些jQuery插件或方法,在这种情况下,我发现最简单的解决scheme是使用setTimeout创build指令,因为setTimeout函数获取推到浏览器队列的末尾,一切都完成后,它始终是正确的,通常是ng-repeat ,它是父母postLinkingfunction后继续

 angular.module('myApp', []) .directive('pluginNameOrWhatever', function() { return function(scope, element, attrs) { setTimeout(function doWork(){ //jquery code and plugins }, 0); }; }); 

谁想知道为什么不使用$超时,它会导致另一个摘要循环是完全不必要的。

编辑:

Thanx到drzaus链接如何使用$超时没有导致摘要http://www.codelord.net/2015/10/14/angular-nitpicking-differences-between-timeout-and-settimeout/