How to access the inner element from an angularjs directive?

Question

I'd like to compute the element scroller width, as the number of children x the width of first child. To do that, I have designed a directive hscroller.

The HTML is as follows:

<div class="scrollerContainer">
    <div id="photos" class="scroller" hscroller="hi!">
        <div ng-repeat="photo in stage.photos" 
            class="imageViewerBackground" 
            style="background-image: url(rsc/stage/{{stage.id}}/{{photo.file}}.thumb.jpg)"
            ng-click="openPopoverImageViewer('#photos', $index)"
            >
            <div>{{photo.description}}</div>
        </div>
    </div>
</div>

The directive is as follows:

app.directive('hscroller', function () {
    return {
        restrict: "A",
        link: function(scope, element, attr) {
            var pid=$(element).attr("id");
                var children = $(element).children();
                var id=$(children).attr("id");
                var firstChild = $(children[0]);
                var width = firstChild.width()*(children.length);
                console.log("openPopover hscroller: compute scroller (id="+id
                    +") width "+children.length+" children of "
                    +firstChild.width()+"px width, total="+width
                    + " (parentid="+pid+")"
                );

                $(element).css({"width":width+"px"});
        }
    };
});

While running, it sounds the directive has no children in there (a race condition with the ng-reapeat.?), the log is as follows:

[Log] openPopover hscroller: compute scroller (id=undefined) width 0 children of nullpx width, total=0 (parentid=photos)

I'm stuck with this, any idea?

Note: btw, all this is to adjust the width of the scroller element so that I could have a nice horizontal scroller on ipad device (Is there a fix in CSS?).

.hScrollable {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space:nowrap;
}

.scrollerContainer {
    width: 100%;
    height: @popoverScrollHeight;
    .hScrollable;
}
.scroller {
    overflow: hidden;    // this is really important to avoid vertical scrolling on devices
    height: @popoverScrollHeight;
}

Answer 1

You'd propably want to write your code in the link function inside a $timeout callback.

No need to wrap element with jQuery since it's already a jquery object.

app.directive('hscroller', function ($timeout) {
    return {
        restrict: "A",
        link: function(scope, element, attr) {
            $timeout(function(){
                var pid=element.attr("id");
                var children = element.children();
                (...)
            });

        }
    };
});