jQueryをAngular、Fixedサイドバーにしない（？）

Question

jQueryプラグインをAngular Directiveに変換しても、まだ正しく動作していない、または全く動作していません。

This is the behavior I want to achieve

Here is a jsfiddle also

私はこれを達成したいすべてが、どこでも「スティッキー」と言い、左側のサイドバー上の行動であることを覚えておいてください。

私はjQuery（私はAngularを初めて使用しています）で行い、Angularを使用する必要があります。行こうとしてください、Plunkr Example、その動作は、私が欲しいものです。皆さんの一部が時間をかけて私を助けてくれたら、事前に感謝してください。 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 
      }); 
     }; 
    }); 
}); 

とは私の角度指令である：

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

私のディレクティブは、一度あなたがスクロールしない時点では良いですが、the console.logが表示されます。

Answer 1

私は既にそれを私の友人に働いています。これは

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