AngularJS NanoScroller sau khi ng-lặp lại không hiển thị

Question

Tôi đã được nhiều bài viết trên stackoverflow nhưng tôi đã không quản lý để tìm câu trả lời được nêu ra. Tôi có một plugin jQuery cuộn (nanoscroll), và tôi muốn nó cập nhật sau khi một ng-lặp lại. Như nhiều bài viết ở đây gợi ý, tôi đã sử dụng một chỉ thị như thế này:

myApp.directive("postRender", function() { 
    return function(scope, element, attrs) { 
     jQuery('.nano').nanoScroller({preventPageScrolling: true}); 
    } 
}); 

và sau đó tôi có một cái gì đó như:

<div class="nano"> <!-- my scrollable area --> 
    <div ng-controller="MyController"> 
     <div ng-repeat="item in items" post-render> 
     ... 
     </div> 
    </div> 
    Some content here... 
</div> <!-- my scrollable area --> 

Vấn đề là (tôi không có ý tưởng tại sao), nếu nội dung chỉ lớn hơn một chút so với kích thước có sẵn cho .nano div thì thanh cuộn không hiển thị.

Tôi tin rằng AngularJS không chờ đợi để chèn nội dung sau bộ điều khiển trước khi cố gắng cập nhật nanoscroller và nội dung này được thêm sau chỉ thị posrt-render. Nhân tiện, tôi nghi ngờ rằng vấn đề này xuất phát từ NanoScroller vì khi tôi nhấn F11 hai lần (toàn màn hình và trở về chế độ bình thường), không có bất kỳ sửa đổi DOM nào, thanh cuộn xuất hiện.

Cảm ơn, hilnius

__ _ _ ĐÁP

Cuối cùng tôi tìm thấy giải pháp. Đối với những người tự hỏi, nó là cần thiết để sử dụng dịch vụ timeout $. Giống như vậy:

myApp.directive('postRender',['$timeout', function (timer) { 
    return { 
     link: function (scope, elem, attrs, ctrl) { 
      timer(function() { 
        jQuery('.nano').nanoScroller({preventPageScrolling: true}) 
       } 
       , 0); 
     } 
    } 
}]); 

Tôi đã không tìm được giải pháp mà tôi vẫn chưa biết vấn đề ở đó. Tôi tin rằng đó là vì chỉ thị góc không chờ đợi cho DOM được sửa đổi hoàn toàn, có thể có những lo ngại về thời gian.

Answer 1

OP đã tìm thấy giải pháp.

Cần sử dụng dịch vụ thời gian chờ $ timeout. Như thế này:

myApp.directive('postRender',['$timeout', function (timer) { 
    return { 
     link: function (scope, elem, attrs, ctrl) { 
      timer(function() { 
        jQuery('.nano').nanoScroller({preventPageScrolling: true})  
       }, 0); 
     } 
    } 
}]);