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

Posted 2023-03-07

【中文标题】在 MEAN.JS 堆栈中运行 jQuery 代码

【英文标题】：Running jQuery code in MEAN.JS stack

【发布时间】：2014-09-25 00:43:33

【问题描述】：

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

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

我尝试将它放在页面正文中，在一个单独的脚本中，但没有。当我在 Chrome 中调试时，变量 tooltips 不包含任何元素，但如果我在 Chrome 的控制台中执行相同的代码，那么它就可以工作。在我看来，尽管有 $(document).ready() 的东西，但在代码执行时 DOM 还没有准备好。也许 AngularJS 正在同时发挥它的魔力，而这会干扰。

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

感谢您的帮助。

【问题讨论】：

您在使用引导工具提示吗？如果是这样，那么有一个角度指令。看看angular-ui

否则，您应该在指令内完成这项工作。

嗨@Kevin B。我在研究这个问题时来到了 angular-ui-bootstrap 模块。我正在尝试，因为它似乎比尝试将 jQuery 与 AngularJS 混合使用更好的解决方案，并且它将全部留在家庭中；-) 感谢您的评论。

有一种简洁的方法可以用 jquery 以一种有角度的方式实现这一点。做一个小演示

请附上您的演示链接，以便人们在这里找到它。

【参考方案1】：

工具提示将不包含任何元素，因为它仅限于您为 $(document).ready() 指定的匿名函数的范围。其次，“工具提示”在变量声明中拼写错误。试试这段代码来帮助你调试：

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

现在您可以进入控制台并评估变量$tooltips 以查看它是否存在。注意：我在变量前面加上了 $，以帮助将其识别为 jQuery 对象。不要将它与内置的 Angular 服务混淆。

此外，Angular 不会在生成页面的模板中执行 javascript。请务必在主页输出中指定外部 JavaScript 或放置此代码以在 Angular 加载视图时执行。

【讨论】：

嗨@SamT。写问题时引入了拼写错误。现在已修复。我尝试了您的解决方案但没有成功。我也在尝试另一种可能比使用 jQuery 更好的解决方案。感谢您的宝贵时间！

【参考方案2】：

我建议创建一个指令，而不是在准备好的 dom 中应用它：

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

现在，只要您在其中一个模板中的元素上使用 tooltip 或 data-tooltip 属性，工具提示插件就会应用到它。

_{免责声明：我没有测试过这段代码，最后建议不要为此使用jquery。相反，使用 angular-bootstrap-tooltip 或类似的角度解决方案}

【讨论】：

我选择这个作为正确答案，因为它解决了原始问题并且它的作用就像魅力一样。尽管如此，我鼓励那些阅读这里的人使用@Kevin 提到的 angular-ui-bootstrap 方法。它工作得很好，它是 Angular（不需要外部 JS 依赖项）并且需要更少的工作。你可以在这里查看 angular-ui-bootstrap：angular-ui.github.io/bootstrap

答案给出了替代方案，但没有回答问题。如果你有一个想要在 Jquery 上运行的代码，然后最终转换成 angular。在这种情况下，如何在 angular 中运行 Jquery。这里的项目截止日期也很重要。

我认为这些都不会改变我的答案。如果你编写的代码与 dom 以 Angular 交互，它应该在指令中。