Угловая директива не работает после изменения маршрута

Question

Будучи довольно новым для Углового Я в настоящее время создаю приложение с использованием углового и Angular Material, пытаясь написать мою первую директиву. Я столкнулся с некоторыми проблемами.

Что я хочу сделать: У вас есть карта на странице с панелью инструментов наверху. Как только панель инструментов прокручивается в верхней части экрана, она будет «прилипать». Чтобы добиться такого поведения, я написал простую директиву.

app.directive("sticky", function() { 

return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 

     //"content" is the container in which my app scrolls. 
     var content = document.getElementById('content'); 
     angular.element(content).bind("scroll", function() { 

     var cardOffset = element[0].parentElement.offsetTop; 
     var scrolled = content.scrollTop; 
     var cardHeight = element[0].parentElement.clientHeight; 
     var bottomOffset = cardOffset + cardHeight; 

     //Check if we are currently scrolling through this element. 
     if (scrolled >= cardOffset && scrolled <= bottomOffset) { 
      element[0].style.top = (scrolled - cardOffset) + 'px'; 
      scope.shadow = true; 
     } else { 
      scope.shadow = false; 
     } 
     if (scrolled <= cardOffset) { 
      element[0].style.top = '0px'; 
     } 

     }); 
    } 
} 

}); 

Адрес plunker of that in action. Как вы можете заметить, plunker работает так же, как я описал выше.

Однако, когда я помещаю это в свое приложение, я получаю следующее странное поведение: при посещении представления, содержащего липкий элемент, указанный элемент не имеет липкого поведения. Мое первоначальное предположение было чем-то неправильным с $ routeProvider, но, как показывает плункер, оно работает с этим.

Я действительно потерял и искал идеи, которые я могу изучить, чтобы исправить мою проблему.

Answer 1

Эти проблемы обычно возникают, поскольку DOM не полностью загружен до запуска JS. Если вы добавляете $ timeout вокруг своего элемента, то он работает без проблем.

Смотрите отредактированный plunker: https://plnkr.co/edit/xyjNRuEpRQ09KFHFcHjx?p=preview

app.directive("sticky", ['$timeout', function($timeout) { 

    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $timeout(function() { 
     var content = document.getElementById('content'); 
     angular.element(content).bind("scroll", function() { 

      var cardOffset = element[0].parentElement.offsetTop; 
      var scrolled = content.scrollTop; 
      console.log(scrolled); 
      var cardHeight = element[0].parentElement.clientHeight; 
      var bottomOffset = cardOffset + cardHeight; 

      //Check if we are currently scrolling through this element. 
      if (scrolled >= cardOffset && scrolled <= bottomOffset) { 
      element[0].style.top = (scrolled - cardOffset) + 'px'; 
      scope.shadow = true; 
      } else { 
      scope.shadow = false; 
      } 
      if (scrolled <= cardOffset) { 
      element[0].style.top = '0px'; 
      } 

     }); 
     }, 0); 
    } 
    } 
}]);