AngularJS指令DOM操作不起作用
问题描述:
此代码必须在页面上缓慢滚动。我正在使用AngularJS 1.4,并且在代码集成方面存在问题。AngularJS指令DOM操作不起作用
更精确地说,如果我做一个简单的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);
};
答
我想通了。我不得不为点击事件做一个绑定。
$(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;
}
});
答
这可能是也可能不是你所期待的,但可能会有所帮助:
function scrollToPoint(_index){
var element = angular.element('.nav-scroll').eq(_index).offset();
$timeout(function(){
$("html, body").animate({scrollTop: element.top}, "1000");
},100);
}
我有我的页面顶部调用此函数,并将索引导航。然后,我为每个要为页面设置动画的“导航滚动”类都有div。我相信最主要的可能是将'有生命的'代码置于$超时之内。
感谢您的帮助,但我从我的代码中发现问题:) – Doro