Question

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


       }
    }
});

我想我错过了什么。谢谢！

Answer 1

你可以让你的指令成为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;
                       }
                    }    
                 });
             }
        }
    }
});

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

我希望这对你有所帮助。

Answer 3

为了改善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);
                        }
                    }


                 });
             }
        }
    }
});

AngularJS：为ng-repeat

3 个答案: