Question

对Angular来说还是新手我目前正在使用angular和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。正如您可能已经注意到，弹药的工作原理如上所述。

然而，当我将它放入我的应用程序时，我得到以下奇怪的行为：当访问包含粘性元素的视图时，所述元素没有粘性行为。我最初的猜测是$ routeProvider有问题，但正如plunker所说，它可以解决这个问题。

我真的迷失了，正在寻找我可以研究的想法，以解决我的问题。

Answer 1

通常会出现这类问题，因为在运行JS之前DOM尚未完全加载。如果你在元素周围添加$ 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);
    }
  }
}]);

路线改变后角度指令不起作用

1 个答案: