Question

我有一个角度指令，其链接模板有一个简单的代码块

<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块放在OUTSIDE指令之外 - 一切正常。所以很可能JQuery没有认识到我在Angular Directive中放置的DOM元素。

在HTML页面中加载了所有指令文件后，我添加了jquery文件。任何帮助都会非常感激。

Answer 1

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

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

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元素

1 个答案: