AngularJS NanoScroller nach ng-Wiederholung zeigt nicht

Question

Ich habe durch viele Beiträge auf stackoverflow gewesen, aber ich habe es nicht geschafft, die Antwort noch zu finden. Ich habe ein jQuery Scrollbar-Plugin (Nanoscroll), und ich möchte es nach einer ng-Wiederholung aktualisieren. Wie viele Beiträge hier schon sagt, habe ich eine Anweisung wie folgt verwendet:

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

und dann habe ich so etwas wie:

<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 --> 

Das Problem ist, dass (ich habe keine Ahnung, warum), wenn der Inhalt ist nur ein bisschen größer als die verfügbare Größe für die .nano div dann wird die Bildlaufleiste nicht angezeigt.

Ich glaube, dass AngularJS nicht wartet, den Inhalt nach dem Controller einzufügen, bevor versucht wird, nanoscroller zu aktualisieren, und dass dieser Inhalt nach der Direktive postrt-render hinzugefügt wird. Übrigens bezweifle ich, dass dieses Problem von NanoScroller kommt, denn wenn ich F11 zweimal drücke (Vollbild und zurück in den Normalmodus), erscheint die Bildlaufleiste ohne DOM-Modifikation.

Danke, hilnius

__ _ _ ANTWORT

Schließlich fand ich die Lösung. Für diejenigen, die sich wundern, ist es notwendig, den $ Timeout-Service zu verwenden. So etwas:

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

Obwohl ich eine Lösung gefunden habe, ist mir das Problem, das da war, noch immer nicht bewusst. Ich glaube, das liegt daran, dass die eckige Richtlinie nicht darauf gewartet hat, dass das DOM vollständig geändert wird, vielleicht gab es Zeitprobleme.

Answer 1

OP gefunden die Lösung.

Es ist notwendig, den $ Timeout Service zu verwenden. Gefällt mir:

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