Angularjs判斷頁面是否已經渲染結束（動態給標簽長度）

相信大家都會碰到這樣的問題。頁面循環li。但是因為個數不知道。沒有辦法給li設置固定寬度。那么這時就需要動態計算數據長度並動態改變li的寬度

<!--周邊信息-->  
        <div class="around_information">  
            <div class="title_info">  
                <i></i>  
                <p>周邊信息</p>  
            </div>  
            <div class="around_info">  
                <div class="around_table">  
                    <ul>  
                        <li class="aroundLength" ng-repeat="data in aroundInfoData"on-finish-render-filters>  
                            <label>{{data.aroundName}}</label>  
                            <p>{{data.aroundNum}}</p>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div> 

<li></li>可以默認給個固定寬度，當然不給也是完全OK的

控制器中的數據信息：

$scope.aroundInfoData =[{"aroundName":"所在商圈", "aroundNum":"李寧商圈"}, {"aroundName":"安踏", "aroundNum":"0"}, {"aroundName":"特步", "aroundNum":"1"}, {"aroundName":"361°", "aroundNum":"0"},{"aroundName":"高中", "aroundNum":"3"}, {"aroundName":"耐克", "aroundNum":"0"},{"aroundName":"阿迪達斯", "aroundNum":"2"}, {"aroundName":"瑜伽館", "aroundNum":"1"},{"aroundName":"大學", "aroundNum":"2"}, {"aroundName":"籃球館", "aroundNum":"0"},{"aroundName":"健身房", "aroundNum":"0"}]

json數據可以自己造。想造多少都可以

需要監聽頁面是否渲染結束。AngularJS有$last是最后一個元素。用到指令

app.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
});

Controller里面用$on去監聽

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        //監聽頁面渲染結束
        $scope.showLength =$scope.aroundInfoData.length  //把實際需要展示數據的格式賦給showLength
        var titleWidth = document.getElementsByClassName("aroundLength");
        for(var i =0;i<document.getElementsByClassName("aroundLength").length;i++){
            document.getElementsByClassName("aroundLength")[i].style.width = (100/$scope.showLength)+"%";
        }
    });

預期結果：