Question

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

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

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

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

感谢您的帮助。

Answer 1

我建议创建一个指令而不是在dom ready中应用它：

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

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

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

Answer 2

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

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

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

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

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

2 个答案: