прокрутка не работает над перезагрузкой директив angularjs

Question

У меня есть директива со списком событий. Он отлично работает, когда директива сначала загружена. Но когда директива снова загружается, она никогда не вызывает событие прокрутки. И он также работает, когда я связываю событие прокрутки в контроллере, который загружает html-файл.

код в директиве, как:

angular.module('myApp.directives') 
    .directive('documents', ['$window', 
     function ($window) { 

      'use strict'; 
      var stickTitleOnTop = function() { 

     //*****// 
      }; 

      return { 
       restrict: "E", 
       scope: '=', 
       templateUrl: "partials/document.html", 
       link: function ($scope, $elem, $attr) { 
        var contentToScroll = angular.element(".main-content"); 
        contentToScroll.bind('scroll', function() { 
       $scope[ $attr.scroll] = true; 
       $scope.$apply(); 
       stickPageTitleToTop(); 
      }); 

        $scope.$on("$destroy", function(){ 
         angular.element(".main-content").unbind('scroll'); 
        }); 
       } 
      }; 
     }]); 

HTML:

<div class="main-content"> 
<documents> 
<div class="col-xs-12"> 
    <accordion close-others="true"> 
     <accordion-group ng-repeat="element in ::elements"> 
      <accordion-heading id="::element.title"> 
        {{::element.title}}     
      </accordion-heading> 
      <accordion-body> 
       <document-form document-template="documentTemplate">     </document-form> 
      </accordion-body> 
     </accordion-group> 
    </accordion> 
</div> 
</documents> 
</div> 

Answer 1

.scrollable{ 
    max-height: ***px; 
    overflow-x: hidden; 
    overflow-y: auto; 
}