du-scroll-container defaults to the own element when the defined target has not yet existed

[stary71]

I have the following code:

<aside du-scroll-container="scrollcontainer" ng-include src="'app/tpl/side-menu.html'"></aside>
<div id="scrollcontainer" ng-include src="'app/tpl/sections.html'"></div>

And suddenly there came up a situation, when the ScrollSpy feature doesn't work (usally after refreshing the page with F5). After some investigation I discovered that the 'scroll' event is not bound to the div "scrollcontainer" but to the <aside> tag instead. Then I realised that the directive cannot find the div as it's not yet added to the DOM. The simplest workaround I managed to find is like this:

<aside du-scroll-container="{{_scrollcontainer}}" ng-include src="'app/tpl/side-menu.html'"></aside>
<div id="scrollcontainer" ng-include src="'app/tpl/sections.html'" ng-init="applyScrollContainer('_scrollcontainer','scrollcontainer')"></div>

and in the controller:

$scope.applyScrollContainer = function(varToBind,id){
    $timeout(()=>{
      $scope[varToBind] = id;
   });
};

But it doesn't look clever does it?

[philippeluickx]

+1 I am trying to scroll to the correct position in my menu based on a function that uses scrollToElementAnimated in the Controller, activated when the controller is loaded. However, when just loading the page 80% of the times it fails, sometimes it works. If I add a 3 second timeout, it always works.

[mohitdia]

Any update on this issue? This is affecting my application as I have three tabs whose content is loaded via a directive and when line 11/12 in scroll-container.js is executed

iAttrs.$observe('duScrollContainer', function(element) {

only the navigation element is present in the DOM and not the tab content div which has du-scroll-container applied on it. I'll workaround this with the timeout suggestion given by @stary71. @oblador can we come up with a better solution to this problem?

Thanks!