Question

我有以下JQuery代码，我试图在我的一个AngularJS应用程序视图中运行但由于某些原因我无法跟踪它无效。相同的代码在没有AngularJS应用程序的任何HTML页面中工作，所以我想知道在AngularJS应用程序中使用此JQuery功能是否存在冲突或问题？如果不是我怎么能使它工作？任何一个例子都受到高度赞赏。

jQuery(document).ready(function($){
  $('.clientblock').hover(function() {
    $(this).closest('.budget').find('.budgettooltip').stop(true,true).fadeToggle('fast');
  });
});

由于

Answer 1

当您使用jQuery事件时，您需要告诉＆＃39;关于它的AngularJS。

您可以通过将代码包装在$ scope中来实现。$ apply（fn）

jQuery(document).ready(function($){
  $('.clientblock').hover(function() {
    $scope.$apply(function() {
       $(this).closest('.budget').find('.budgettooltip').stop(true,true).fadeToggle('fast');
    });
  });
});

希望这可以解决您的问题，但这取决于您的意思＆＃39;不工作＆＃39;？

用作指令：

.directive('budgetTooltip',
    function(){
        return {
            restrict: 'A',
            link: function ($scope, $element) {
                $element.hover(function() {
                    $(this).closest('.budget').find('.budgettooltip').stop(true,true).fadeToggle('fast');
                });
            }
        };
    });

请注意，它不再需要$ scope。$ apply，这是因为我们没有使用jQuery＆＃39; hover＆＃39;但AngularJS＆＃39; hover＆＃39;执行$ scope的函数。$适用于我们。

如果你开始一直使用它而不是使用jQuery，你会发现AngularJS更容易。 AngularJS提供了大多数常见的jQuery功能，所以尽可能使用它。

要使用该指令，请将budget-tooltip添加到要应用的元素中。

AngularJs和JQuery悬停不起作用

1 个答案: