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

我开始与NodeJS合作，并且更加专注于MEAN.JS. 我试图运行一些自定义JS代码，使用JQuery，但无论我把代码放在哪里，nevers运行如预期。 这是我的脚本：

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

我试图把它放在页面的主体中，在一个单独的脚本中，但没有。 当我在Chrome中debugging时，variablestooltips不包含任何元素，但如果我在Chrome的控制台中执行相同的代码，那么它工作。 在我看来，尽pipe$(document).ready()东西，DOM代码执行时还没有准备好。 也许AngularJS正在同时发挥作用，并干扰。

有什么我需要这样做，代码将被执行？ 我需要在/之前加载它吗？

谢谢你的帮助。

Answer 1

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

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

现在，无论何时您在其中一个模板的某个元素上使用tooltip或data-tooltip属性，工具提示插件都将应用于该模板。

_{免责声明：我还没有testing过这个代码，最后会build议不要使用jquery这个。 相反，使用angular-bootstrap-tooltip或类似的angular度解决scheme}

Answer 2

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

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

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

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