AngularJS 指令 DOM 操作不起作用

Posted 2023-02-22

【中文标题】AngularJS 指令 DOM 操作不起作用

【英文标题】：AngularJS directive DOM manipulation does not work

【发布时间】：2017-01-23 13:21:24

【问题描述】：

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

更确切地说，如果我用这段代码制作一个简单的 JS 源文件，它的效果非常好，没有问题。但我读到 DOM 操作必须留在指令中。问题是，如果我使用链接函数（范围、元素、属性）集成到我的指令中，我的代码将无法正常工作。

我尝试将它放在 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);
;

【参考方案1】：

我想通了。

我必须为点击事件绑定。

$(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;
    
);

【参考方案2】：

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

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

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

我的页面顶部有一个导航，它调用这个函数并传递一个索引。然后，我为每个要为页面设置动画的 div 设置了一个 'nav-scroll' 类。我相信可以帮助的主要是将“动画”代码放在 $timeout 中。

【讨论】：

感谢您的帮助，但我从我的代码中发现了问题:)