Директива AngularJS DOM-манипуляция не работает

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

Я понял.

Мне пришлось сделать привязку для события 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; 
    } 
}); 

Answer 2

Это может или не может быть то, что вы ищете, но может помочь:

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

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

У меня есть навигация в верхней части моей страницы, которая вызывает эту функцию и передает индекс. Затем у меня есть divs с классом «nav-scroll» для каждого, для которого я хочу анимировать страницу. Я считаю, что главное, что может помочь, - это поставить «анимированный» код внутри $ timeout.