JQuery没有检测到角度指令中的DOM元素

Posted 2023-02-22

【中文标题】JQuery没有检测到角度指令中的DOM元素

【英文标题】：JQuery not detecting DOM elements inside angular directive

【发布时间】：2015-07-28 09:27:29

【问题描述】：

我有一个 angular 指令 带有一个链接模板，该模板有一个简单的代码块

<div>
  <h1 class="dfaded">Hello World</h1>
</div>

现在在我的 index.html 文件的末尾我放了一个 javascript 函数

<script>
$(document).ready(function () 
    $('.dfaded').addClass("ahidden").viewportChecker(
        classToAdd: 'avisible animated fadeIn',
        offset: 100
    );
);
</script>

但是这个功能不起作用。在进一步调试时，即使我放了一个简单的函数，比如

$('.dfaded').hide();

它仍然无法正常工作。现在，如果我将此 HTML 块放在指令之外 - 一切正常。所以很可能 JQuery 没有识别我放在 Angular 指令中的 DOM 元素。

在 HTML 页面中加载了所有指令文件后，我添加了 jquery 文件。任何帮助将不胜感激。

【参考方案1】：

您的 jQuery 脚本在 Angular 处理和呈现模板文件之前运行。这就是为什么你不应该像以前那样在 Angular 项目中使用 jQuery 的原因之一。

为了使其正常工作，将viewportChecker 插件初始化包装到自定义指令中。例如，它可能看起来像这样：

app.directive('viewportChecker', function() 
    return 
        link: function(scope, element) 
            element.addClass("ahidden").viewportChecker(
                classToAdd: 'avisible animated fadeIn',
                offset: 100
            );
        
    ;
);

然后你会将此指令附加到必要的标签：

<div>
    <h1 class="dfaded" viewport-checker>Hello World</h1>
</div>

【讨论】：

谢谢。这很有帮助。添加一个快速跟进问题 - 我们可以通过将动画作为范围变量传递来重新编写此函数以更灵活吗？

只是补充一下 - 我使用 Wow.JS 解决了我的具体问题

是的，有可能。你到底想通过什么？这部分'avisible animated fadeIn'应该是可配置的吧？

这是一个示例，说明如何将动画类与指令属性一起传递：jsfiddle.net/f79z9qzq

@dfsq，如何在 Angular 2 中使用视口检查器？