JQuery 未检测到 angular 指令中的 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>

JQuery 未检测到 angular 指令中的 DOM 元素

JQuery not detecting DOM elements inside angular directive

html

javascript

jquery

angularjs

angular-directive