javascript - JQuery 未检测到 Angular 指令内的 DOM 元素

Question

我有一个带有链接模板的 Angular Directive(指令)，其中有一个简单的代码块

<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 block 放在指令之外 - 一切正常。因此，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>