如何将一些 jQuery 函数转换为 angularjs 指令？

Question

我会写jQuery。但是，我对angularjs知之甚少。我制作了一个 jQuery 场景，我必须在 angularjs 项目中使用它。请 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。但是，有很多error/mistake-I相信，我不清楚如何成功完成它。你能帮我把这个 jQuery 转换成 anguarjs 指令吗？提前致谢

Answer 1

您可以将函数与 link 函数分开，以便在 window 调整大小和加载时重用它，方法是传递由 jQuery 包装的 angular 元素。

还有：

在您原来的 fiddle 中缺少 angularjs 初始化 ng-app="App"。这导致您的应用程序无法运行。
声明指令时，使用camelCase syntax, caclulateRow. But when applying it on html you must use XML like syntax (dash-delimited);即 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>

如何将一些 jQuery 函数转换为 angularjs 指令？

how to convert some jQuery functions into angularjs directive?

jquery

angularjs

angular-directive