Question

我有角度指令，每次用户滚动一点时添加固定到顶级类，以获得带有一些基本信息的粘性标题。指令如下：

app.directive('fixedTop', function ($window) {
    var $win = angular.element($window);
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
           $log.debug("fixedTop init");
           var topClass = attrs.fixedTop;
           var containerClass = 'container';
           var offsetTop = element.offset().top;
           $win.on('scroll', function (e) {
                if ($win.scrollTop() >= offsetTop) {
                    element.addClass(topClass);
                    element.children().first().addClass(containerClass);
                    $log.debug("fixedTop add topClass");                        
                } else {
                    element.removeClass(topClass);
                    element.children().first().removeClass(containerClass);
                    $log.debug("fixedTop remove topClass");
                }
            });
        }
    }
});

我的路线是在没有任何自定义插件的情况下定义的：

$routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'home'
        })
        //rest of routes

索引html：

<div class="row" id="main-ccontent">
    <div class="col-sm-10 col-md-10 col-lg-offset-1 main">
        <div ng-view="" class="container main-container">
        </div>
    </div>
</div>

使用指令的两个模板之一从以下开始：

<div class="row header-fixed animate-appear" fixed-top="fix-to-top">
    <!--      Header       -->
</div>
<div>
    <!-- Content goes here -->
</div>

它应该很好用，问题是，每当我更改路由（转到其他子页面）时，我的指令不起作用，并且我必须执行页面刷新（F5）以使其再次工作。

所以我认为它有关于路由如何工作以及何时呈现指令或类似内容的事情？

UPDATE ：添加日志记录后，在我滚动时首次加载。在控制台日志中：

fixedTop init
(times 6 ) fixedTop remove topClass
(times 38) fixedTop add topClass

但是当我导航到另一条路线时，我有：

fixedTop init
(times 6 ) fixedTop remove topClass
fixedTop add topClass
fixedTop remove topClass
fixedTop add topClass
fixedTop remove topClass
fixedTop add topClass
fixedTop remove topClass
fixedTop add topClass
fixedTop remove topClass
fixedTop add topClass
fixedTop remove topClass

..依此类推...... 所以看起来在路线改变时，它正在打开和关闭

更新2 添加了scrollTop和偏移调试：

            $log.debug(offsetTop);
            $log.debug($win.scrollTop());

路线变更结果是

fixedTop init
70
91.81817626953125
fixedTop add topClass
1316.3635711669922
91.81817626953125
fixedTop remove topClass
70
96.36363220214844
fixedTop add topClass
1316.3635711669922
96.36363220214844
fixedTop remove topClass

仅在路线更改时发生这种情况。每当我正常输入页面时，指令都有正确的偏移值

Answer 1

在我回到这里之后。根本原因是ng-route变化内容是动态的

element.offset（）。top

重新渲染元素时的值是错误的。根据{{3}}的回答修复我，详细说明为什么我的原始方法是错误的

如果将元素包装在空div中并使用以下代码

，则final指令现在正在工作

app.directive('fixedTop', function ($window, $log) {
var $win = angular.element($window);
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var topClass = attrs.fixedTop;
        var containerClass = 'container';
        var parent = element.parent();
        $win.on('scroll', function (e) {
            var offsetTop = parent.offset().top;
            if ($win.scrollTop() >= offsetTop) {
                element.addClass(topClass);
                element.children().first().addClass(containerClass);
                parent.height(element.height());
            } else {
                element.removeClass(topClass);
                element.children().first().removeClass(containerClass);
                parent.css("height", null);
            }
          });
        }
    }
});

用法：

<div>
    <div class="row header-fixed animate-appear" fixed-top="fix-to-top">
    <!--  contents -->
    </div>
<div>

指令不会在路线变更时执行相应的指令

1 个答案: