Girare jQuery in Angular, barra laterale fissa non funziona (?)

Question

Sto convertendo un plug-in jQuery in una direttiva angolare, ma ancora non funziona correttamente o: non funziona affatto.

This is the behavior I want to achieve

Here is a jsfiddle also

Ricordate che tutto quello che voglio ottenere con questo, è il comportamento nella barra laterale sinistra dove dice 'appiccicoso' ovunque.

L'ho fatto con jQuery (sono nuovo di Angular) e ho bisogno di farlo funzionare con Angular. Per favore, vai a vedere lo Plunkr Example, quel comportamento è quello che voglio. Grazie in anticipo se qualcuno di voi si prende il tempo per aiutarmi.

un'occhiata al codice jQuery:

$(function() { 
    var offset = $("#sidebar").offset(); 
    var topPadding = 85; 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > offset.top) { 
      $("#sidebar").stop().animate({ 
       marginTop: $(window).scrollTop() - offset.top + topPadding 
      }); 
     } else { 
      $("#sidebar").stop().animate({ 
       marginTop: 50 
      }); 
     }; 
    }); 
}); 

ed ecco la mia direttiva angolare:

angular.module('capilleira.clickAndGambleWebApp.directives', []) 
    .directive('sticky', function ($window) { 
    return { 
     restrict: 'A', 
     controller: ($scope) 
     link: function (scope, element, attrs) { 
     var raw = element[0], 
      offset = element.offset(), 
      topPadding = 85; 

     angular.element($window).bind('scroll', function() { 
      console.log('SCROOOOOOOOOOOOOLLLL'); 
      if ($window.scrollTop > offset.top) { 
      raw.stop().animate({ 
       marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
      } 
     }); 
     } 
    } 
    }); 

mia direttiva è bravo a tal punto che una volta che si fa scorrere, the console.log presenta.

Answer 1

Ho già in funzione i miei amici. Questa è la direttiva che funziona correttamente

angular.module('capilleira.clickAndGambleWebApp.directives', []) 
.directive('sticky', function($document) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     angular.element(document).ready(function() { 
     var offset = element.offset(), 
      topPadding = 85; 
     $document.scroll(function() { 
      if ($document.scrollTop() > offset.top) { 
      element.stop().animate({ 
       marginTop: $document.scrollTop() - offset.top + topPadding 
      }); 
      } else { 
      element.stop().animate({ 
       marginTop: 0 
      }); 
      }; 
     }); 
     }); 
    } 
    }; 
});