AngularJS完成呈现HTML后运行jQuery代码

Question

在控制器中，我使用$ http或$ resource服务获取一些JSON数据。然后，我将此数据写入$
scope，AngularJS更新页面的HTML结构。我的问题是我需要知道用Angular ng-repeat指令填充的列表（我的意思是HTML
DOM元素）的新大小（宽度和高度）是多少。因此，我必须在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());
}

我知道必须有一些容易解决的问题，但我现在不能立即找到它。提前致谢。

Answer 1

实际上，在这种情况下，成角度的方法不是简单的方法，而是唯一正确的方法:)

您必须编写一条指令并将其附加到要知道其高度的元素上。然后从控制器$
broadcast一个事件，指令将捕获该事件，然后您就可以执行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);
            })
        }
    };
}]);