Question

此代码必须在页面上缓慢滚动。我正在使用AngularJS 1.4，我遇到代码集成问题。

更确切地说，如果我使用此代码制作一个简单的JS源文件，它可以很好地工作，没有问题。但我读到DOM操作必须保持指令。问题是，如果我使用链接函数（scope，element，attrs）集成我的指令，我的代码将无法正常工作。

我试着将它放在angular.run（）函数和angular.controller（）函数中，但副作用相同。

如何在角度结构中集成此代码？

PS：此代码必须在另一个处理之前运行。

function changeActiveMenu(targetTag) {
    var rmClass = $('[name="li-menu"]');
    var addClass = $('#' + targetTag);
    rmClass.removeClass('active');
    addClass.addClass('active');
}

function scrollToTag(targetTagId) {
        var targetTag = $('[id="'+ targetTagId +'"]');
        $('html, body').animate({ scrollTop: targetTag.offset().top }, 'slow');
}

$window.onload = function () {
    $('[name=home-page]').click(function(){
        scrollToTag('home');
        changeActiveMenu('li-home-page');
    });
    $('[name=search-sal]').click(function(){
        scrollToTag('search-for-salaries');
        changeActiveMenu('li-search-sal');
    });

    $(window).bind("scroll", function() {
        var sec1 = $("#home").offset().top;
        var sec2 = $("#search-for-salaries").offset().top - 300;

        if ($(this).scrollTop() >= sec1){ 
            changeActiveMenu('li-home-page'); 
        }
        if ($(this).scrollTop() >= sec2){ 
            changeActiveMenu('li-search-sal'); 
        }
    });

    $('.chgCursor').on('mouseover', function () {
        $(this).addClass('cursor-pointer');
    });
    $('.chgCursor').on('mouseout', function () {
        $(this).removeClass('cursor-pointer');
    });

    console.log(element);
};

Answer 1

这可能是您正在寻找的，也可能不是，但可能有所帮助：

 function scrollToPoint(_index){
       var element = angular.element('.nav-scroll').eq(_index).offset();

      $timeout(function(){
         $("html, body").animate({scrollTop: element.top}, "1000");
       },100);
    }

我的页面顶部有一个导航，它调用此函数并传递索引。然后我为每个我要为页面设置动画的每个人都有一个“nav-scroll”类的div。我相信可能有用的主要功能是将'animate'代码置于$ timeout内。

Answer 2

我想通了。

我必须为click事件进行绑定。

$(window).bind("click", function(e) {
    switch(e.target.name) {
        case "home-page":
        scrollToTag('home');
        changeActiveMenu('li-home-page');
            break;
        case "search-sal":
        scrollToTag('search-for-salaries');
        changeActiveMenu('li-search-sal');
            break;
    }
});

AngularJS指令DOM操作不起作用

2 个答案: