javascript - 将 jQuery 变成 Angular，修复侧边栏不起作用(？)

Question

我正在将 jQuery 插件转换为 Angular 指令，但仍然无法正常工作，或者:根本无法工作。

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 指令:

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

我的指令很好，一旦你滚动，console.log 就会出现。

Answer 1

我的 friend 们已经在使用它了。这是指令正常工作

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