获取图像高度在angularjs模板中加载图像后的图像宽度

Question

我在ng-Click上调用renderimage函数，这样我就可以获得图像的高度宽度，并且可以应用于其父容器div。因为光滑的旋转木马没有正确渲染图像。

renderImage函数的问题在于它没有等待图像在图像加载之前执行渲染。

请帮助

以下是我的指示

app.directive('venueWidgetDir', ['$timeout', function ($timeout) {
        return {
            restrict: 'AE',
            $scope: {
                venueData: '=',
                onClickCallback: '=',
                vaidHover: '='
            },
            replace: true,
            templateUrl: "app/directives/venueWidget/venueWidget.tpl.html",
            link: function ($scope, element, attrs) {

                $scope.renderImage = function () {
                    $timeout(function () {
                        console.log("render image called");
                        // console.log("this is element");
                        console.log(element.find('.slick-slide.slick-current.slick-active > img').height);
                        var widthofslick = angular.element('#venue_slider').width();
                        if (widthofslick != null) {
                            widthofslick = widthofslick + 'px';
                            angular.element('#venue_slider > div > div > .slick-slide.slick-current.slick-active').css('width', widthofslick);
                        }
                        var heightofslick = angular.element('#venue_slider > div > div > .slick-slide.slick-current.slick-active > img').height();

                        var htofpicturecaption = angular.element('#venue_slider > div > div > .slick-slide.slick-current.slick-active').children('div').height();
                        if (heightofslick != null && htofpicturecaption != null && heightofslick != 0) {
                            console.log(htofpicturecaption);
                            console.log(heightofslick);
                            var heightofslickandtext = heightofslick + htofpicturecaption + 'px';
                            angular.element('#venue_slider > div ').css('height', heightofslickandtext);
                        }
                    }, 1500)
                }



            },

        }
    }])

我的模板在下面给出

<div class="venue_info_wrapper">
    <div class="venue_info">
        <ul>
            <li ng-repeat="venue in venues" ng-click="checkHover($index)">
                <div class="venue_picture" ng-click="showVenueDetails(venue.details); renderImage()">
                    <img ng-src="{{relPath + venue.thumbnail.replace('thumbnail','visu')}}" />
                </div>
                <div class="venue_identity">
                    <a href ng-class="{active:activeVenuePath == venue.details && validHover !=0}" ng-click=" showVenueDetails(venue.details) ">{{venue.title}}</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="venue_info_popup active" id="carousal">
        <div class="tab_content_wrapper">
            <div class="profile_tab_wrapper" id="profile">
                <div class="country_name">
                    <div class="cn"><span>{{venueInfo.name}}</span>
                    </div>
                    <div class="close_png close_profile">
                        <img src="img/arrow_left_black.png" ng-click="prevNews()" />
                        <img src="img/arrow_right_black.png" ng-click="nextNews()" />
                        <img ng-click="stopSlider()" class="close_img" src="img/close_popup2.png" style="padding-right: 20px" />
                    </div>
                </div>
                <div class="country_name_small"><span>{{venueInfo.name}}</span>
                </div>
                <div id="venue_slider" class="responsive clear slideWrap popup_slider">
                    <div ng-repeat="galleryInfo in venueInfo.gallaryImg">
                        <img ng-src="{{relPath + galleryInfo.component[2]._href}}" />
                        <div class="team_picture_caption">
                            <p>{{galleryInfo.legende.para}}</p>
                        </div>
                    </div>
                    <!--<div>
                        <img ng-src="{{relPath + venueInfo.in._href}}" />
                        <div class="team_picture_caption">
                            <p>{{venueInfo.inPara}}</p>
                        </div>
                    </div>-->
                </div>
                <div class="country_details_wrapper">
                    <div class="country_details">
                        <p ng-repeat="info in venueInfo.venuesDeatil">
                            <span class="bold_n_caps">{{info.dlabel}} :</span>
                            <span class="regular"> {{info.dtext}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>