jQuery的运行code AngularJS完成渲染之后的HTML [英] Run jQuery code after AngularJS completes rendering HTML
问题描述
在控制器我得到使用$ http或$资源服务的一些JSON数据。然后我在$范围写这个数据和AngularJS更新HTML页面的结构。我的问题是,我需要知道什么是列表的新尺寸(宽和高)(我的意思是,HTML DOM元素)充满角 NG-重复
指示。因此,我有角完成更新DOM结构后运行JavaScript code正确。是什么做的正确方法?我已经搜索互联网在过去四年小时,但我找不到任何解决我的问题。
In controller I get some JSON data using $http or $resource services. Then I write this data in $scope and AngularJS updates HTML structure of the page. My problem is that I need to know what is the new size (width and height) of the list (I mean, HTML DOM element) that is filled with Angular ng-repeat
directive. Consequently, I have to run javascript code right after Angular finishes updating DOM structure. What is the proper way to do it? I have searched internet over the last four hours but I couldn't find any solution to my problem.
这是我如何收到JSON数据:
This is how I receive JSON data:
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());
}
我知道一定有什么容易解决这个问题,但我不能找到它了。
先谢谢了。
I know that there must be something easy to solve this problem but I can't just find it now. Thanks in advance.
推荐答案
其实在这种情况下角的方式是不容易的方式,但唯一正确的方式:)
Actually in this case the angular way is not the easy way but the only right way :)
您必须写一个指令,并连接到你想知道的高度的元素。而从控制器您$广播一个事件时,directive'll捕捉事件,那里你可以做的DOM操作。从来没有在控制器中。
You have to write a directive and attach to the element you want to know the height of. And from the controller you $broadcast an event, the directive'll catch the event and there you can do the DOM manipulation. NEVER in the controller.
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);
})
}
};
}]);
这篇关于jQuery的运行code AngularJS完成渲染之后的HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!