Question

我的页面上有一个小菜单，是一个指令。但是当用户滚动时，我希望导航在离开视口后变得粘滞。

我有jquery代码涉及克隆元素，我过去曾使用过这段代码，并试图以多种方式转换为Angular。我试着把它作为一个元素并改变ng-class但是它没有相同的视觉效果而且看起来很糟糕所以我确定我需要两个元素（原始和粘性）。

我尝试在指令链接函数中克隆它，但是它内部的ng-repeat没有运行，所以菜单没有填充链接。

所以我试着把两个＆lt;元素＆gt;在DOM中，它只渲染最后一个。让2个元素通过同一个指令的最佳方法是什么？我迷路了。

指令链接：

link: function( scope, element ){
        var scrollTimer;
        var origHeight = element.offset().top;

        element.clone().insertAfter(element).toggleClass('secondary original');

        angular.forEach(scope.days, function(value, key) {
            var date_data = {action: 'get_date', day: value.name};
            $http({
                method: 'POST',
                url: ajaxUrl,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                data: date_data
            })
            .then(function(response){
                scope.days[key].date = response.data.date;
            });
        });
    }

指令模板：

<div id="day_header" class="original">
    <div ng-repeat="day in days" ng-class="{'active': active_day == day.name}" class="day" ng-click="changeActiveDay(day.name)" data-date="{{day.date}}">{{day.name}}</div>
</div>

Answer 1

我建议不要使用克隆。将所有元素设置为position: relative;。当滚动移动经过该点时，将它们更改为position: absolute;。

如何为两个元素设置角度指令？

1 个答案: