滚动不工作重新加载指令angularjs

Question

我有一个滚动事件的指令。首次加载指令时它工作正常。但是当指令再次加载时，它永远不会调用scroll事件。当我在加载html文件的控制器中绑定scroll事件时，它也有效。

指令中的代码如下：

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