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

Question

我有一个 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 文件。任何帮助将不胜感激。

Answer 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>