我是AngularJS新手，使用Angular + Angular Mobile UI在phonegap中开发应用程序。
我的模板文件中有一个div列表，其中包含Bootstrap列不使用jQuery 。我需要对divs应用高度响应它们在Bootstrap列中的宽度。它应该是一个非常简单的脚本，但我无法处理。
这是我的模板：
template.html
<div ng-controller="ControllerIndex as Ctrl" item-list>
<div ng-repeat="item in items" >
<div class="col-xs-4 object-list-container">
<div class="object-list" >
<p ng-bind-html="item.name"></p>
</div>
</div>
</div>
</div>
这是我的控制器：
angular.module('app').controller('ControllerIndex', function ($scope, $http, $element) {
$scope.items =[];
$http.get(baseUrl +'data/item.json').success(function(data){
$scope.items = data.item;
}).error(function(){
commonError();
});
}）;
这里是指令：
angular.module('app').directive('itemList', function($timeout){
return {
link: function ($scope, $element, $attrs) {
//I tried a lot of things
$timeout(function(){
var elements = document.getElementsByClassName("object-list");
console.log(elements); //Gives an array of 2
var elementsLenght = elements.length;
console.log(elementsLenght); //Gives 0!!!!!!
});
//Get the max height and set to the other div, but i can't enter this cycle
for (var i = 0; i < elementsLenght; i++) {
var elementHeight = elements[i].offsetHeight;
//console.log(elementHeight);
if (elements[i].offsetHeight > maxHeight) {
maxHeight = elementHeight;
}
}
//Attempt number 2
var angularElement = angular.element($element);
var elementObject = angular.element($element[0].querySelector('.object-list'));
console.log(elementObject); //Gives a T object with lenght 0
var xx = angular.element(elementObject[0]);
console.log(xx.offsetHeight);
console.log('elementObject: ', angular.element(elementObject[0])); //Gives html
}
}
});
我想我错过了什么。谢谢！
答案 0 :(得分：2)
你可以让你的指令成为ng-repeat的一部分并检测ng-repeat何时完成加载，并且在该指令中，一旦你检测到最后一个已完成加载，就做你第一次尝试的解决方案。
模板：
<div ng-controller="ControllerIndex as Ctrl">
<div ng-repeat="item in items" item-list>
<div class="col-xs-4 object-list-container">
<div class="object-list" >
<p ng-bind-html="item.name"></p>
</div>
</div>
</div>
</div>
指令：
angular.module('app').directive('itemList', function($timeout){
return {
link: function ($scope, $element, $attrs) {
if ($scope.$last){
var elements = document.getElementsByClassName("object-list");
var maxHeight = 0;
//Get the max height and set to the other div
$timeout(function(){
for (var i = 0; i < elements.length; i++) {
var elementHeight = elements[i].offsetHeight;
//console.log(elementHeight);
if (elements[i].offsetHeight > maxHeight) {
maxHeight = elementHeight;
}
}
});
}
}
}
});
答案 1 :(得分：2)
我长期与同一个问题作斗争。当任何高度被修改时，将div的高度绑定在一起。这是一个有角度的指令，可以帮助我直到今天。
var app = angular.module('app'); //insert your module name instead
function bind_height() {
function doforthiselem(me) {
var value = $(me).attr("bind-height");
var elems = $("[bind-height='" + value + "']");
var heights = elems.toArray().map(function (elem) { return $(elem).height(); });
if (Math.max.apply(me, heights) > Math.min.apply(me, heights)) $(me).height(Math.max.apply(me, heights));
}
$("[bind-height]").each(function () {
doforthiselem(this);
});
}
$(window).load(function () {
if (typeof app == "undefined") bind_height();
});
app.directive("bindHeight", function () {
return {
restrict: 'A',
link: function ($scope, element, attrs) {
bind_height();
element.bind("DOMSubtreeModified", function () {
bind_height();
});
}
}
});
要使用，您需要设置要将其高度绑定到相同值的元素的[bind-height]属性值。例如，
<div>
<div bind-height="my-binding" style="height: 80px;">
<p>Hello World</p>
</div>
<div bind-height="my-binding" style="height: 25px;">
<p>Hello America</p>
<p>Hello World</p>
</div>
<div bind-height="my-binding" style="height: 63px;">
<p>Shoot for the stars</p>
</div>
</div>
其[bind-height]属性具有＆＃34; my-binding＆＃34;的所有div因为他们的价值观的高度必然达到最高的价值。 DIV。如果其中一个被修改，并且其高度发生了变化，其他的也将被更新。
在ng-repeat情况下，这也很有效......
<div ng-repeat="item in items" bind-height="item-height-bind">
<!--do stuff-->
</div>
如果你的元素是每行三列，你可以将它们绑定在三个......
<div ng-repeat="item in items" bind-height="item-height-{{ceil(($index + 1)/3)}}">
<!--do stuff-->
</div>
我希望这对你有所帮助。
答案 2 :(得分：0)
为了改善arathi-sreekumar的答案，我对其进行了修改，以获取完整的工作代码
<div ng-controller="ControllerIndex as Ctrl">
<div ng-repeat="item in items" item-list="object-list">
<div class="col-xs-4 object-list-container">
<div class="object-list" >
<p ng-bind-html="item.name"></p>
</div>
</div>
</div>
</div>
现在，指令将CSS类作为参数并将元素的高度设置为最大高度
let myDirective = 'itemList';
angular.module('app').directive('itemList', function($timeout){
return {
link: function ($scope, $element, $attrs) {
if ($scope.$last){
var elements = document.getElementsByClassName($attrs[myDirective]);
var maxHeight = 0;
//Get the max height
$timeout(function(){
for (var i = 0; i < elements.length; i++) {
var elementHeight = elements[i].offsetHeight;
//console.log(elementHeight);
if (elements[i].offsetHeight > maxHeight) {
maxHeight = elementHeight;
}
}
// set to max height to divs
for (var j = 0; j < elements.length; j++) {
if (elements[j].offsetHeight < maxHeight) {
angular.element(elements[j]).height(maxHeight);
console.log(elements[j].offsetHeight);
}
}
});
}
}
}
});