Question

我可以写jQuery。但是，我对angularjs知之甚少。我已经制作了一个jQuery场景，我必须在angularjs项目中使用它。请have a look in my jQuery sample。我正在尝试将jQuery scenario转换为angular directive。正如我之前所说，我不太了解angularjs，所以我无法成功。但是，我试图让它成为with angular directive at this fiddle。但是，有很多错误/错误 - 我相信并且我不清楚如何成功地完成它。你能帮我把这个jQuery转换成anguarjs指令吗？提前致谢

Answer 1

您可以将函数与链接函数分开，以便在窗口调整大小并通过传递jQuery包装的angular元素来加载时重用它。

此外：

在原始小提琴中，缺少angularjs初始化ng-app="App"。这导致您的应用程序无法运行。
在声明指令时，它使用camelCase语法caclulateRow。但是当在html上应用它时，你必须使用类似XML的语法（dash-delimited）;即caclulate-row。

＆＃13;

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);
            });
        }
    };
}]);

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

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

1 个答案: