古いリストを削除する前に、ng-repeatを再ロードすると新しいリストがレンダリングされる

Question

初めてLIがng-repeatのを含むULの幅を測定する必要があります。データを再ロードするときしかし幅は、私はそれが古いLIの

どのように私が最初に新しいもの

をレンダリングする前に、古いLIのを削除することができますを削除する前に、新しいLIのレンダリング角度によるものであると考えているダブル実際の幅としてで来ます

PS私は1000のタイムアウトを置く場合、それはうまく動作しますが、私は毎回1秒待つことを望んでいません。

<ul class='ul'> 
    <li ng-repeat="thing in data.things" class="buyer_li" ng-init="$last && getUlWidth()"> 
      <p>{{thing.detail}} 
    </li> 
</ul> 
<button ng-click="reloadData()">Reload</button> 



$scope.getUlWidth = function(){ 

    setTimeout(function() { 
     $scope.ulWidth = document.querySelector('.ul').clientWidth; 

    }, 0); 
} 

$scope.reloadData = function(){ 
    //reloadDataFunc; 
} 

Answer 1

私はおそらくあなたのレイアウトのCSS、確かではないと思う。しかし、私はpenを含むことができます。

function exampleController($scope, exampleFactory, $timeout) { 
 
    $scope.list = []; 
 
    $scope.listContainerWidth = '???'; 
 

 
    $scope.refreshList = function() { 
 
    $scope.list = []; 
 
    $scope.listContainerWidth = '???'; 
 
    $scope.listContainerWidth = document.querySelector('.ul').clientWidth; 
 
    $timeout(function() { 
 
     getList(); 
 
    }, 1000); 
 
    }; 
 

 
    function getList() { 
 
    exampleFactory 
 
     .getList() 
 
     .then(function(list) { 
 
     $scope.list = list; 
 
     }); 
 
    } 
 

 
    getList(); 
 
} 
 

 
function exampleFactory($http) { 
 
    var root = 'http://jsonplaceholder.typicode.com'; 
 

 
    function getList() { 
 
    return $http.get(root + '/comments') 
 
     .then(function(resp) { 
 
     return resp.data; 
 
     }); 
 
    } 
 
    return { 
 
    getList: getList 
 
    }; 
 
} 
 

 
angular 
 
    .module('app', []) 
 
    .controller('exampleController', exampleController) 
 
    .factory('exampleFactory', exampleFactory);

.container-fluid { 
 
    background-color: #1D1F20; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    button { 
 
    margin-top: 20%; 
 
    } 
 
} 
 

 
ul li { 
 
    list-style: none; 
 
    margin: 10px; 
 
} 
 

 
.child-padding>div { 
 
    padding: 2px; 
 
} 
 

 
.col-md-2 { 
 
    position: fixed; 
 
    button { 
 
    margin-bottom: 10%; 
 
    } 
 
} 
 

 
.circle-bound { 
 
    float: left; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    width: 25%; 
 
    background-color: #0bf; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="container-fluid" ng-app="app"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div class="row"> 
 
     <div class="col-md-2 text-center"> 
 
     <button class="btn btn-primary" type="button" ng-click="refreshList()">Refresh Comment List</button> 
 
     <div class="circle-bound" ng-bind="listContainerWidth"></div> 
 
     </div> 
 
     <div class="col-md-10 pull-right"> 
 
     <ul class="ul"> 
 
      <li ng-repeat="comment in list track by $index"> 
 
      <div class="child-padding"> 
 
       <div ng-bind="comment.email"></div> 
 
       <div ng-bind="comment.body"></div> 
 
      </div> 
 
      <div class="pull-right" ng-bind="comment.name"></div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私は私が、何でNGリピートを追跡する追加= $インデックスでトラックをINGのしても問題が解決しなかったので、それはですなぜ起こるか理由を見つけました。

は、この質問を参照してくださいAngular ng-repeat causes flickering