使用指令使所有div高度相同

Question

I have a web as shown below,

There grid is not properly arranged.

When i exected following code in console, it formed the grid correctly.

var maxHeight = Math.max.apply(null, $("#activityfeeddetails").find(".course_thumb_outer").map(function (){
                    return $(this).height();
                }).get());

$("#activityfeeddetails").find(".course_thumb_outer").css("height",maxHeight);

screen after executing the code:

Question: How can I add this code in angular directive, so that it executes once all the data and template is loaded.

Edit : here is the current directive (not working properly),

dwmProfileDirectives.directive('profileActivityFeedTab', ['Activityfeed', function(Activityfeed) {
    return {
        restrict: 'E',
        scope: {
            current:'=current'
        },
        templateUrl:'tabs/dwm-profile-activity-feed.html',
        controller: function($scope) {
            $scope.Activityfeeds = Activityfeed.get();
            $scope.Activityfeeds.$get().then(function(v){
                var maxHeight = Math.max.apply(null, angular.element("#activityfeeddetails").find(".course_thumb_outer").map(function (){
                    return $(this).height();
                }).get());

                angular.element("#activityfeeddetails").find(".course_thumb_outer").css("height",maxHeight);
            });         
        }
    };
}]);

Answer 1

You can simply fix this issue by setting a min-height property instead of heigth and all the elements will have the same heigth of the max heigth element.

So just change this line:

angular.element("#activityfeeddetails").find(".course_thumb_outer").css("height",maxHeight);

with the following:

angular.element("#activityfeeddetails").find(".course_thumb_outer").css("min-height",maxHeight);

And it should do the trick.