自動滾動angularjs似乎不起作用

Question

嗨，我正在用angularjs構建一個chatapp，我希望chatbox自動向下滾動。 我正在使用放置在指令中的以下示例： http : //jsfiddle.net/atRkJ/

它按原樣工作，但是當我將其與ng-repeat一起使用時，它不起作用。

html文件

     <ul  id="chat" style="height:300px; overflow:auto" scroll-if>

            <li data-ng-repeat="messageinfo in messages" > 

                <div class="message-date">
                    {{messageinfo[0]}}
                </div>

            </li>

        </ul>

directive.js

  .directive('scrollIf', function() {
return{
    restrict: "A",
    link: function(scope, element, attributes) {
        var chat_height = $('#chat').outerHeight();
        console.log(chat_height);
        $('#chat').scrollTop(chat_height);
    }
   }
  });

有什么幫助嗎？ 謝謝

Answer 1

調用代碼時：

var chat_height = $('#chat').outerHeight();
console.log(chat_height);
$('#chat').scrollTop(chat_height);

您的ng-repeat尚未運行並完成其渲染，但=>返回的outerHeight不正確。

ng-repeat完成后，您必須運行代碼。 為此，您可以定義另一個指令：

.directive('scrollItem',function(){
    return{
    restrict: "A",
    link: function(scope, element, attributes) {
        if (scope.$last){ // If this is the last item, trigger an event
           scope.$emit("Finished");
       }
    }
   }
});

用它：

<li data-ng-repeat="messageinfo in messages" scroll-item>

現在可以在ng-repeat完成時通知您的scrollIf指令

.directive('scrollIf', function() {
return{
    restrict: "A",
    link: function(scope, element, attributes) {
        scope.$on("Finished",function(){ //Handle an event when all the items are rendered with ng-repeat
            var chat_height = element.outerHeight();
            console.log(chat_height);
            element.scrollTop(chat_height); 
        });
    }
   }
  });

DEMO