NG-滚动条不与NG-重复工作 [英] ng-scrollbar is not working with ng-repeat

问题描述

在我的应用我想用一个自定义的滚动条的一个div。所以我用NG-滚动，它工作正常与静态数据。但每当我得到使用数据NG-重复它不工作。请帮我在这方面。先谢谢了。

myFile.html

 ＆LT;风格＆GT;
  .scrollme {
    最大高度：300像素;
   }
＆LT; /风格＆GT;＆LT; D​​IV NG-应用程序=的myapp＆GT;
  ＆LT; D​​IV CLASS =容器NG-控制器=myctrl＆GT;    ＆LT;按钮类=BTN BTN-INFONG点击=添加（）;＆gt;添加＆LT; /按钮＆GT;
    ＆LT;按钮类=BTN BTN-警告NG点击=删除（）;＆GT;删除＆LT; /按钮＆GT;    ＆LT; D​​IV CLASS =以及＆GT;
      ＆LT; D​​IV CLASS =scrollmeNG-滚动底重建上=重建：我＆GT;
        ＆LT; H1＆GT;滚动我失望＆LT;！/ H1＆GT;
        ＆LT; p NG重复=MI在我​​身上＆GT; {{mi.name}}＆LT; / P＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

myCtrl.js

  VAR的myapp = angular.module（'MyApp的，[ngScrollbar]）;
myapp.controller（'myctrl'，函数（$范围）{
    $ scope.me = [];
    对于（VAR I = 1; I＆LT; = 20;我++）{
        $ scope.me.push（{名：我}）;
    }
    风险价值= $ scope.me.length;
    $ scope.add =功能（）{
    $ scope.me.push（{名：$ scope.me.length + 1}）;
    $ $范围广播（'重建：我）。
    }
    $ scope.remove =功能（）{
        $ scope.me.pop（）;
    }
}）;
 

解决方案

尝试添加广播打电话到控制器的末尾，以便它触发控制器负载。如果还是不行，请尝试添加：

  $超时（函数（）{
    $ $范围广播（'重建：我）。
}，0）;
// 0可选，没有它的时候就认为是0，这意味着接下来的消化循环。
 

在你的控制器code年底，add函数里面没有。如果这个工作，但是previous方法并不那么这意味着ngRepeat没有完成呈现它的及时动态内容的ngScrollbar正确更新。

更新：在一般情况下，你可能必须包装广播的add（）函数中的超时也。我这样说的原因是，我怀疑这是怎么回事的是，你在同一个函数调用数据添加到范围变量，然后播放所有。什么可能发生的是，广播事件被捕获并重新计算滚动条看到ngRepeat更新范围数据并增加其额外的DOM元素之前。顺便说一句，如果你想重新计算加（滚动条），那么你也想这样做，对remove（）方法为好。

所以，你的add函数将变成：

  $ scope.add =功能（）{
    $ scope.me.push（{名：$ scope.me.length + 1}）;
    //等到下一次消化循环发送事件，这样ngRepeat有足够的时间来更新（？）
    $超时（函数（）{
        $ $范围广播（'重建：我）。
    }）;
}
 

In my app I want to use a custom scrollbar for a div. So I used ng-scrollbar, it is working fine with static data. But whenever I get the data using ng-repeat it is not working. Please help me in this regard. Thanks in advance.

myFile.html

<style>
  .scrollme {
    max-height: 300px;
   }
</style>

<div ng-app="myapp">
  <div class="container" ng-controller="myctrl">

    <button class="btn btn-info" ng-click="add();">add</button>
    <button class="btn btn-warning" ng-click="remove();">remove</button>

    <div class="well" >
      <div class="scrollme" ng-scrollbar bottom rebuild-on="rebuild:me">
        <h1>Scroll me down!</h1>
        <p ng-repeat="mi in me">{{mi.name}}</p>
      </div>
    </div>
  </div>
</div>

myCtrl.js

var myapp = angular.module('myapp', ["ngScrollbar"]);
myapp.controller('myctrl', function ($scope) {
    $scope.me = [];
    for(var i=1;i<=20;i++){
        $scope.me.push({"name":i});
    }
    var a = $scope.me.length;
    $scope.add = function(){        
    $scope.me.push({"name":$scope.me.length+1});
    $scope.$broadcast('rebuild:me');
    }
    $scope.remove = function(){
        $scope.me.pop();
    }
});

解决方案

Try adding the broadcast call to the end of your controller so it fires on controller load. If that doesn't work, try adding:

$timeout(function () {
    $scope.$broadcast('rebuild:me');
}, 0);
// 0 optional, without it the time is assumed 0 which means next digest loop.

at the end of your controller code, not inside the add function. If this works but the previous approach doesn't then that means ngRepeat didn't finish rendering it's dynamic content in time for the ngScrollbar to properly update.

UPDATE: in general, you might have to wrap the broadcast inside of the add() function in a timeout as well. The reason I say this is that I suspect what's going on is that you add data to the scope variable and then broadcast all in the same function call. What might be happening is that the broadcast event is caught and scrollbar recalculates before ngRepeat sees the updated scope data and adds its extra DOM elements. Btw, if you want to recalculate the scrollbar on add(), then you also want to do this on remove() as well.

So your add function would become:

$scope.add = function(){        
    $scope.me.push({"name":$scope.me.length+1});
    // wait until next digest loop to send event, this way ngRepeat has enough time to update(?)
    $timeout(function () {
        $scope.$broadcast('rebuild:me');
    });
}

这篇关于NG-滚动条不与NG-重复工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！