我正在尝试使用 jQuery.matchHeight 将元素设置为相同的高度。我从 Angular 指令调用该函数
angular.module('myApp')
.directive('matchHeight', ['$timeout', function ($timeout) {
var linkFunction = function(scope, element) {
$timeout(function() {
angular.element(element).matchHeight();
});
};
return {
restrict: 'A',
link: linkFunction
};
}]);
matchHeight插件和jQuery包含在index.html中
<html>
<head>
all head stuff
</head>
<body>
<div class="row usps">
<div class="col-sm-4 usp-block" ng-repeat="block in content.marketing" match-height>
<a href="{{block.link_url}}" class="thumbnail">
// Rest of html
</a>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/matchHeight/dist/jquery.matchHeight.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/directives/matchheight.js"></script>
</body>
</html>
问题是尽管指令应用于元素，但高度并未设置。
最佳答案
jQuery.matchHeight plugin会将数组中的所有项目设置为该数组中最高元素的高度。
match-height 指令应用于单个元素。由于没有数组，因此未在元素上设置高度。
将指令移至 DOM 中的父元素并向子元素添加类 equal 即可得到设置高度所需的数组。
<div class="row usps" match-height>
<div class="col-sm-4 usp-block equal" ng-repeat="block in content.marketing">
<a href="{{block.link_url}}" class="thumbnail">
// Rest of html
</a>
</div>
</div>
在服务中，我将 matchHeight 函数应用于具有类 equal 的所有元素
angular.module('myApp')
.directive('matchHeight', ['$timeout', function ($timeout) {
var linkFunction = function(scope, element) {
$timeout(function() {
angular.element(element).find('.equal').matchHeight();
});
};
return {
restrict: 'A',
link: linkFunction
};
}]);
关于javascript - 使用 Angular 指令中的 jQuery.matchHeight，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40155223/