Javascript 在MEAN.JS堆栈中运行jQuery代码

我开始使用NodeJS，尤其是MEAN.JS。我正在尝试使用JQuery运行一些自定义JS代码，但无论我将代码放在哪里，它都不会按预期运行。这是我的剧本：

$(document).ready(function(){
    var tooltips = $('[data-toggle="tooltip"]');
    tooltips.tooltip();
});

我试着把它放在页面的主体中，用一个单独的脚本，但什么也没有。当我在Chrome中调试时，变量

tooltips

不包含任何元素，但是如果我在Chrome的控制台中执行相同的代码，那么它就可以工作。在我看来，尽管有

$（document）.ready（）

这件事，但当代码执行时DOM还没有准备好。也许AngularJS正在同时施展魔法，这会造成干扰

我需要做些什么才能执行代码吗？我必须在某事之后/之前加载它吗

---

感谢您的帮助。

工具提示将不包含任何元素，因为它仅限于您为

$（document.ready（）

指定的匿名函数的范围。其次，“工具提示”在变量声明中拼写错误。请尝试以下代码以帮助您调试：

$(document).ready(function(){
    window.$tooltips = $('[data-toggle="tooltip"]');
    $tooltips.tooltip();
});

现在，您可以进入控制台，计算变量

$tooltips

，查看它是否存在。注意：我在变量前面加了一个

$

，以帮助将其标识为jQuery对象。不要将其与内置的角度服务混淆

---

此外，Angular不会在其生成页面的模板中执行JavaScript。请确保在主页输出中指定外部JavaScript，或在Angular加载视图时执行此代码。

我建议创建一个指令，而不是将其应用于dom就绪：

angular.module("myModule")
    .directive('tooltip', function () {
        return {
            restrict: 'A',
            link: function (scope, elem) {
                $(elem).tooltip();
            }
        }
    });

现在，每当您在模板中的某个元素上使用

工具提示

或

数据工具提示

属性时，工具提示插件将应用于该元素

---

免责声明：我没有测试过这段代码，最后建议不要为此使用jquery。相反，使用角度引导工具提示或类似的角度解决方案

Hi@SamT。拼写错误是在写问题时引入的。现在修好了。我尝试了你的解决方案，但没有成功。我还在尝试另一种可能比使用jQuery更好的解决方案。谢谢你的时间！您正在使用引导工具提示吗？如果是这样，就有一个角度指示。看看angular ui，否则，您可能应该在指令中完成这项工作。嗨@Kevin B。我是在研究这个问题时使用angular ui引导模块的。我正在尝试，因为这似乎是一个比尝试将jQuery与AngularJS混合使用更好的解决方案，而且它将全部留在家族中；-）谢谢你的评论。不过，有一种干净的方法可以通过jquery以一种角度实现这一点。制作一个小的演示，请把你的演示链接放在这里，这样人们就可以在这里找到它。我选择这个作为正确答案，因为它解决了最初的问题，而且效果很好。尽管如此，我还是鼓励这里的读者使用@Kevin提到的角度ui引导方法。它工作得非常好，它是有角度的（不需要外部JS依赖项），并且需要更少的工作。您可以在这里检查angular ui引导：答案给出了一个备选方案，但没有回答问题。如果你有一个代码，你想在Jquery上运行，然后最终转换成angular。在这种情况下，如何在angular中运行Jquery。在这里，项目截止日期也很重要。我认为这不会改变我的答案。若您编写的代码以angular方式与dom交互，那个么它应该在指令中。