javascript – 在AngularJS完成呈现HTML之后运行jQuery代码

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

这是我如何接收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());
}

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

实际上在这种情况下,角度的方式不是容易的方式,但唯一正确的方式:)

你必须写一个指令,并附加到你想知道的高度的元素。并且从控制器你广播一个事件,指令将抓住事件,你可以做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);
            })
        }
    };
}]);
http://stackoverflow.com/questions/16935766/run-jquery-code-after-angularjs-completes-rendering-html

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 在AngularJS完成呈现HTML之后运行jQuery代码