Directive - Modify DOM in link function

Question

I'm trying to modify the margin of some element in link function.

This is my code:

scope.size = (($("#highlight .thumbs li").width() * $("#highlight .thumbs li").size()) + (20 * ($("#highlight.thumbs li").size() - 1)));

elem.find(".thumbs").addClass({ width : scope.size});

The thing is: The scope.size in the link function is -20px;

If I put the code inside the $timeout() function with 100 milliseconds delay, I got the real value, which is 252px ;

There is some trick to watch the DOM to get the final value of width or elements inside the template after rendering? I don't want to use $timeout to blink the element in the view.

Answer 1

link: { post : function($scope, $element, attributes, controllers, $timeout){
        var listener = $scope.$watch(function(){
            var value = '';
            var inputs = $element.find(':input');

            for(var i = 0;i < inputs.length;i++ ){
                value += ' '+inputs[i].value;
            }

            if(value.trim() == ''){
                $scope.value = $scope.text;
            } else {
                $scope.value = value;
            }
        });
    }}

add your code in $scope.$watch(function(){ // your code });