Question

E.g。

function SomeCtrl($scope) {
    $scope.list = [...]

    $scope.click = function() {
        var newdata = $someservice.get()
        angular.forEach(newdata, function(v){
              $scope.list.push(v) 
        })
        //???
    }
}

HTML：

<div style="height:400" id="main">
   <div ng-repeat="row in list">
   ...
   </div>
</div>

我的问题是当我向$scope.list添加数据时，如何在数据更新到UI时获取通知，因为我希望主div始终滚动到底部？

Answer 1

试试这个

var module = angular.module('testApp', [])
   .directive('onFinishRender', function ($timeout) {
   return {
     restrict: 'A',
       link: function (scope, element, attr) {
        if (scope.$last === true) {
            $timeout(function () {
                scope.$emit('ngRepeatFinished');
            });
        }
    }
 }
});

请注意，我没有使用.ready（），而是将其包装在$ timeout中。 $ timeout确保在ng-repeated元素真正完成渲染时执行（因为$ timeout将在当前摘要周期结束时执行 - 并且它也会在内部调用$ apply，与setTimeout不同）。所以在ng-repeat完成之后，我们使用$ emit向外部作用域（兄弟和父作用域）发出一个事件。

然后在你的控制器中，你可以用$ on来抓住它：

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

Answer 2

Ravi发布了一个很好的指令来听取ngRepeat完成渲染。另外，我会创建另一个指令来自动更新内容。整个代码就是这样的：

// +1 to Ravi
app.directive('onFinishRender', function($timeout) {
    return {
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

// Scroll content on every ngRepeatFinished event
app.directive('autoScroll', function() {
    return {
        link: function(scope, element) {
            scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
                element[0].scrollTop = element[0].scrollHeight;
            });
        }
    };
});

在HTML中使用它：

<div id="main" auto-scroll>
   <div ng-repeat="row in list" on-finish-render>
       <p>{{row}}</p>
   </div>
</div>

如何在angularjs完成渲染UI时注册事件

2 个答案:

演示：http://jsfiddle.net/C5xKv/