Question

我在下面提供了一个Plunker，当你点击按钮时，会执行一个循环，将数据添加到ng-repeat。在每次循环之后，数据应该是console.log（）容器的ScrollHeight。我会假设它会记录三个唯一的数字，但它会将div的最终高度记录三次。有什么想法吗？

http://plnkr.co/edit/dMbrWsrwfQuf0HCv8Ggn?p=preview

控制器：

$scope.shares = [{
  name: 'all'
}, {
  name: 'day'
}, {
  name: 'I'
}, {
  name: 'dream'
}, {
  name: 'about'
}, {
  name: 'javascript'
}, ]

$scope.heights = [];
$scope.dataset = [];

var tableview = document.getElementById('tableview');

var TableViewOne = new TableView($scope.shares);


$scope.testing = function() {

  for (var i = 0; i < 3; i++) {
    TableViewOne.setData();
    TableViewOne.setHeight();
  }

}

function TableView(data) {

  var heights = [];

  this.setData = function() {
    var temp = data;
    for (var i = 0, len = temp.length; i < len; i++) {
      $scope.dataset.push(temp[i]);
    }
  }

  this.setHeight = function() {
    angular.element(document).ready(function() {
      heights.push(tableview.scrollHeight);
      console.log(heights);
    });
  }

}

Answer 1

将宽度，高度和溢出CSS赋予＆＃34; ul＆＃34; style.css中的标签

Style.css：

    width:400px;
    height:300px;
    overflow:overlay;

更新了plunker：http://plnkr.co/edit/2dyER88Hkx1RNGGZ5iSG?p=preview

Answer 2

更新模型时，角度不会立即在同一函数内更新其视图。 Angular在其摘要循环中更新当前周期结束时的视图。这就是为什么你不能立即看到更新的高度。

使用像angular这样的MVC架构时，不应直接在控制器的代码中访问视图（DOM）。尝试重新构建代码以仅修改模型，让角度为您处理DOM操作。

如果你需要处理滚动事件来添加更多项目，你可以试试这个：

$("#tableview").scroll(function(){
    $scope.$apply(function(){ //let angular aware of changes from events outside of angular.

       //do your logic to add more items.
    });
});

另一种包装此逻辑以使其与angular很好地集成的方法是编写自定义指令。

更新ng-repeat时ScrollHeight不会更改

2 个答案: