Question

135

Run jQuery code after AngularJS completes rendering HTML

rated 0 times [ 140] [ 5] / answers: 1 / hits: 62976 / 11 Years ago, wed, june 5, 2013, 12:00:00

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.

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

    

});

And this is what happens in init() function:

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sienad

Add To Favorites

Follow

Total Points: 208

Total Questions: 100

Total Answers: 77

Location: Taiwan

Member since Mon, Sep 6, 2021

3 Years ago

answered 11 Years ago havenbilliec · Accepted Answer

Actually in this case the angular way is not the easy way but the only right way :)

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

            })

        }

    };

}]);