javascript - JQuery 未检测 Angular Directive(指令)内的 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 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>