Question

我正在尝试在angularjs中创建一个tooltip指令但是有一个问题：我必须在指令工作之前单击该元素。单击元素后，该指令工作正常，但这不是我想要的。我的想法是，我希望能够将鼠标悬停在元素上，然后查看工具提示。如何在不必首先单击元素的情况下使绑定工作？

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: { loc: "@" },
        replace: false,
        templateUrl: 'partials/tooltip.html',
        link: function ( scope, element, attrs) {
            scope.tooltip_content = attrs.title;
            scope.tooltip_placement = 'tooltip_' + attrs.placement;
            element.bind("mouseenter",function(){
                scope.hover = true;
            });
            element.bind("mouseleave",function(){
                scope.hover = false;
            });
        }
    };
});


<div tooltip loc="somewhere" title="Show Message" placement="left">
    <div class="my_class">Stuff</div>
</div>

Answer 1

当绑定到像mouseenter这样的本机事件时，您需要为Angular提供一个微调，以便强制执行摘要周期并更新范围。您可以使用$scope.$apply执行此操作。因此，在每个绑定函数中添加$apply：

element.bind("mouseenter",function(){
    scope.hover = true;
    scope.$apply();
});

这应该更新范围值。

顺便说一句，单击该元素可能会执行运行摘要的工作。这就是您在单击后看到范围更新的原因。

指令绑定仅在单击元素后才有效

1 个答案: