需要AngularJS网格大小调整指令来调整“大小”；“缩略图”；不包含图像的

更新Plunker到项目：

我有一个AngularJS项目，它使用AngularJS引导网格。 我需要所有网格元素具有相同的大小，以便它们正确地堆叠。 我创建了一个angularJs指令，当放置在所述网格元素中时，该指令自动调整网格元素的大小。 我有两个指令为我做这件事 指令1：空载 指令2：图像加载

<div class="thumbnail col-md-3" title="thumbnailCouponGrid" onload>
<div class="innnerContainer">

    <div class="text-center">
        {{coupon.name}}
        <br />
        <br />
        <b>Description</b>
        <br />
        {{coupon.description}}
        <br />
        <br />
        <button class="btn btn-large btn-primary" ng-click="goToCoupon()">View Coupon Details</button>
    </div>

</div>

指令2起作用。如果网格元素使用图像，则在加载图像后，该指令将触发一个事件，该事件将网格元素的高度发送给所有其他网格元素。如果通过事件发送的高度大于侦听事件的网格元素的高度，则侦听网格元素会将其高度更改为更大的高度。这样，最大高度将成为所有栅格图元的高度

指令1不起作用。这一个放置在最外层的网格元素html元素上，并在元素加载时触发。问题是，当元素加载并且onload指令被称为AngularJS时，还没有在所述网格元素中填充数据。结果是AngularJS数据绑定后的真实高度不会作为事件广播

我唯一想到的解决方案（但没有尝试）是将一个图像URL添加到一个存在但没有任何数据的图像中，并将其放置在网格元素中（在空白元素之前没有任何图像）。然后我可以调用imageonload而不是onload，我非常确定angularjs数据绑定将在那时完成

问题是，这是相当骇人听闻的。我更希望能够在网格元素中没有图像，并且能够调用我的自定义onload指令，让onload指令在angularJS数据绑定到网格元素中的所有数据绑定变量后计算高度

这是我的imageonload指令

.directive('imageonload', function($rootScope) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        scope.heightArray = [];
        scope.largestHeight = 50;
        element.bind('load', function() {
            broadcastThumbnailHeight();
        });

        scope.$on('imageOnLoadEvent', function(caller, value){
            var el = angular.element(element);
            var id = el.prop('id');
            var pageName = el.prop('title');
            if(pageName == value[0]){
                if(scope.largestHeight < value[1]){
                   scope.largestHeight = value[1];
                    var nestedString = el.prop('alt');
                    if(nestedString == "")
                        nestedString = "1";
                    var nested = parseInt(nestedString);
                    nested = nested - 1;
                    var inte = 0;
                    var thumbnail = el["0"];
                    var finalThumbnailContainer = thumbnail.parentElement;
                    while(inte != nested){
                        finalThumbnailContainer = finalThumbnailContainer.parentElement;
                        inte++;
                    }
                    var innerEl = angular.element(finalThumbnailContainer);
                    var height = value[1];
                    innerEl.height(height);
                }
            }
        });
        scope.$on('findHeightAndBroadcast', function(){
            broadcastThumbnailHeight();


        });
        scope.$on('resetThumbnailHeight', function(){
            scope.largestHeight = 50;


        });
        function broadcastThumbnailHeight(){
            var el = angular.element(element);
            var id = el.prop('id');
            var alt = el.prop('alt');
            if(alt == "")
                alt = "1";
            var nested = parseInt(alt);
            nested = nested - 1;
            var pageName = el.prop('title');
            var inte = 1;
            var thumbnail = el["0"];
            var finalThumbnail = thumbnail.parentElement;
            while(inte != nested){
                finalThumbnail = finalThumbnail.parentElement;
                inte++;
            }
            var elZero = el["0"];
            var clientHeight = finalThumbnail.clientHeight;
            var arr = [];
            arr[0] = pageName;
            arr[1] = clientHeight;
            $rootScope.$broadcast('imageOnLoadEvent', arr);
        }
    }
};

指令（'imageonload'，函数（$rootScope）{ 返回{ 限制：“A”， 链接：函数（范围、元素、属性）{ scope.heightArray=[]； scope.largestHeight=50； 元素绑定（'load'，function（））{ 拇指指甲高度（）； }); 作用域：$on（'imageOnLoadEvent'，函数（调用者，值）{ var el=角度元素（元素）； 变量id=el.prop（'id'）； var pageName=el.prop（“标题”）； 如果（pageName==值[0]）{ if（scope.largestHeight<值[1]）{ scope.largestHeight=值[1]； var nestedString=el.prop（'alt'）； 如果（嵌套字符串==“”） nestedString=“1”； var nested=parseInt（nestedString）； 嵌套=嵌套-1； var inte=0； 变量缩略图=el[“0”]； var finalThumbnailContainer=thumbnail.parentElement； while（inte！=嵌套）{ finalThumbnailContainer=finalThumbnailContainer.parentElement； inte++； } var innerEl=angular.element（finalThumbnailContainer）； 变量高度=值[1]； 内部高度（高度）； } } }); 作用域：$on（'findHeightAndBroadcast'，函数（）{ 拇指指甲高度（）； }); 作用域：$on（'resetThumbnailHeight'，函数（）{ scope.largestHeight=50； }); 函数thumbnailheight（）{ var el=角度元素（元素）； 变量id=el.prop（'id'）； var alt=el.prop（'alt'）； 如果（alt==“”） alt=“1”； var nested=parseInt（alt）； 嵌套=嵌套-1； var pageName=el.prop（“标题”）； var inte=1； 变量缩略图=el[“0”]； var finalThumbnail=thumbnail.parentElement； while（inte！=嵌套）{ finalThumbnail=finalThumbnail.parentElement； inte++； } var elZero=el[“0”]； var clientHeight=finalThumbnail.clientHeight； var-arr=[]； arr[0]=页面名； arr[1]=倾斜度； $rootScope.$broadcast（'imageOnLoadEvent'，arr）； } } }; })

及 这是我的onload指令

.directive('onload', function($rootScope) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        scope.largestHeight=100;
        getHeightAndBroadcast();
        scope.$on('onLoadEvent', function(caller, value){
            var el = angular.element(element);
            var id = el.prop('id');
            var pageName = el.prop('title');
            if(pageName == value[0]){
                if(scope.largestHeight < value[1]){
                    scope.largestHeight = value[1];
                    var height = value[1];
                    el.height(height);
                }
            }
        });
        function getHeightAndBroadcast(){
            var el = angular.element(element);
            var h = el["0"].children;
            var thumbnailHeightElement = angular.element(h);
            var pageName = el.prop("title");
            var clientHeight = thumbnailHeightElement["0"].clientHeight;
            var arr = [];
            arr[0] = pageName;
            arr[1] = clientHeight;
            if(clientHeight != undefined)
                $rootScope.$broadcast('onLoadEvent', arr);
        }
    }
};

指令（'onload'，函数（$rootScope）{ 返回{ 限制：“A”， 链接：函数（范围、元素、属性）{ 范围：最大高度=100； getHeightAndBroadcast（）； 作用域：$on（'onLoadEvent'，函数（调用者，值）{ var el=角度元素（元素）； 变量id=el.prop（'id'）； var pageName=el.prop（“标题”）； 如果（pageName==值[0]）{ if（scope.largestHeight<值[1]）{ scope.largestHeight=值[1]； 变量高度=值[1]； el.高度（高度）； } } }); 函数getHeightAndBroadcast（）{ var el=角度元素（元素）； var h=el[“0”]。儿童； var thumbnailHeightElement=角度元素（h）； var pageName=el.prop（“标题”）； var clientHeight=thumbnailHeightElement[“0”]。clientHeight； var-arr=[]； arr[0]=页面名； arr[1]=倾斜度； if（clientHeight！=未定义） $rootScope.$broadcast（'onLoadEvent'，arr）； } } }; })

下面是一个使用imageonload的网格元素的示例。注意image html元素中的imageonload指令。这很有效。网格元素最外层的html上还有一个onload指令。这是行不通的。我已经通过了

<div class="thumbnail col-md-3" title="thumbnailCouponGrid" onload>
<div class="innnerContainer">

    <div class="text-center">
        {{coupon.name}}
        <br />
        <br />
        <b>Description</b>
        <br />
        {{coupon.description}}
        <br />
        <br />
        <button class="btn btn-large btn-primary" ng-click="goToCoupon()">View Coupon Details</button>
    </div>

</div>

link: function(scope, element, attrs, $timeout) {

    // Use of $timeout with 0 delay fixes function applied before DOM update completion.
    $timeout(function() {
      getHeightAndBroadcast();  
    }, 0, true);