how to convert some jQuery functions into angularjs directive?

I can write jQuery. But, I know very little of angularjs. I have made a jQuery scenario which I have to use at angularjs project. Please, have a look in my jQuery sample. I am trying to take this jQuery scenario into an angular directive. As I said before, I don't know angularjs well so that I can't make it successfully. But, I have tried to make it with angular directive at this fiddle. But, there are lots of error/mistake-I believe and I don't understand clearly how to complete it successfully. Can you please help me to convert this jQuery into anguarjs directive? Thanks in advance

Solution

You can separate your function from the link function to reuse it when window resize and load by passing the angular element wrapped by jQuery.

Also:

In your original fiddle the angularjs initialization ng-app="App" is missing. This caused your application to not run ever.
When declaring directives, it's used the camelCase syntax, caclulateRow. But when applying it on html you must use XML like syntax (dash-delimited); i.e. caclulate-row.

var app = angular.module('App', []);

app.directive("caclulateRow", [function () {

    function tableAdjustedHeight(el) {
        var firstColHeight = el.find('td:nth-child(1)').outerHeight();
        var secondColHeight = el.find('td:nth-child(2)').outerHeight();
        var thirdColHeight = el.find('td:nth-child(3)').outerHeight();
        var fourthColHeight = el.find('td:nth-child(4)').outerHeight();

        el.find('td:nth-child(2)').css('top', firstColHeight);
        el.find('td:nth-child(4)').css('top', thirdColHeight);

        var leftColHeight = firstColHeight + secondColHeight;
        var rightColHeight = thirdColHeight + fourthColHeight;

        var colHeightArray = [leftColHeight, rightColHeight];
        var largeHeight = Math.max.apply(null, colHeightArray);
        el.height(largeHeight);
    }

    return {
        restrict: "A",
        scope: {

        },
        link: function (scope, element, attr) {

            var el = $(element);

            if ($(window).width() < 992) {
                tableAdjustedHeight(el);
            }

            $(window).resize(function () {
                tableAdjustedHeight(el);
            });
        }
    };
}]);

.table td {
  width: 25%;
}

@media (max-width: 991px) { 
  .table tr {
    position: relative;
  }
  .table td {
    display: inline-block;
    width: 50%;
  }
  .table td:nth-child(2){
    position: absolute;
    left: 0;
  }
  .table td:nth-child(4){
    position: absolute;
    right: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table class="table" ng-app="App">
  <tr class="main-row" caclulate-row>
    <td>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</td>
    <td>Text Text Text Text</td>
    <td>Text Text Text Text Text Text</td>
    <td>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</td>
  </tr>
</table>