이것은 내가 나중에이 문제에 다시 걸려 넘어지는 사람에게 한 일입니다. 데이터를 변경하거나 창을 사용하여 크기를 조정할 때
자바 스크립트 AngularJS와없이
function ResizeToLargestElement(element) {
var maxHeight = -1;
if ($(element).length > 0) {
$(element).each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$(element).each(function() {
$(this).height(maxHeight);
});
}
}
AngularJS와를 사용하지 않는 사람들을 위해
, 단지 ResizeToLargestElement() 전화 AngularJS와 와
$(window).resize(function() {
ResizeToLargestElement('.AutoResizeToLargestElement');
});`
아이디어는로 전화하는 것입니다.은 $scope.Results이 변경되거나 창 크기가 변경 될 때마다 작동합니다.
언제 $scope.Results이 변경되었는지 쉽게 알 수 있지만 요소 (바인딩 된 요소)가 렌더링을 완료하는시기를 쉽게 알 수 없습니다. 이를 위해서는 AngularJS 지시문이 필요합니다. 윈도우 재 크기, angular.element($window).on('resize', function() {...});
HTML
<div class="row">
<div data-ng-repeat="s in Results" data-ng-repeat-finished> <!--ADDED Directive-->
<div class="col-xs-4">
<a href="#" class="thumbnail AutoResizeToLargestElement"> <!--ADDED Class-->
<div>
<img ng-src="{{s.ProductImage}}" class="img-responsive">
</div>
<div>
{{s.Store}} {{s.Category}} {{s.ProductName}}
</div>
</a>
</div>
<!--REMOVED clearfix-->
</div>
</div>
MyDirectives를 사용할 때
알고.JS
angular.module('myApp').directive('ngRepeatFinished', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
mycontroller.js
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
ResizeToLargestElement(".AutoResizeToLargestElement");
});
angular.element($window).on('resize', function() {
ResizeToLargestElement(".AutoResizeToLargestElement");
});
참고 :이이 AngularJS와의 $window에게 종속 목록을 포함하도록 요구합니다. I.E. angular.module('myApp').controller('....', ['...., '$window', ....]);
는 그래서 난 제품 목록이 카운트시. 나는 각도로 그렇게하는 법을 모른다. 그래서 나는 그 질문을 너무 높이 세웠다. 나는이 문제를 내 언어로 여러 번 선택했다. –
내 솔루션으로 높이가 같지 않아서, 'jquery'가 필요합니다. 로드 된 모든 항목을 반복하고 최소 높이를 가장 큰 제품인 div와 동일하게 설정합니다. –