Angular- 在鼠标悬停时获取最近的元素

Question

我是 Angular JS 的新手，我正在尝试创建一个用于学习的小型网络应用程序。我正在尝试在鼠标悬停时制作工具提示文本，但我不确定如何获得它完成了 "Angular way"..

我创建了 2 个 span，悬停第一个时，我想显示第二个

我尝试使用 ng-mouseover 和 ng-mouseleave 调用动作-

<span class="info" ng-mouseover="info_in();" ng-mouseleave="info_out();">
    <img src="images/info.png" />
</span>

<span class="info_bubble" ng-show="info">The Tooltip Text</span>

这就是我使用 JS 的地方-

$scope.info_in = function() {
    this.parent().find('.info_bubble') = true;
};

$scope.info_out = function() {
    this.parent().find('.info_bubble') = false;
};

每个页面上将有超过 1 个工具提示文本，我不确定如何完成。我尝试使用 "next()" 和 "closest()" 但无法获得它可以工作

当我尝试将鼠标悬停在元素上时，我得到 "this is not a function"

Answer 1

您的想法是正确的，但您的实施正朝着 jQuery 的方向发展，而不是 Angular 的方式。 :)

试试这个：

<span class="info" ng-mouseover="info=true" ng-mouseleave="info=false">
    <img src="images/info.png" />
</span>

<span class="info_bubble" ng-show="info">The Tooltip Text</span>

无需控制器代码即可工作。

你所做的是，当鼠标进入图像时，Angular会将$scope.info设置为true。由于您的工具提示正在监视该范围变量，因此它将触发 ng-show 指令以显示您的工具提示。

ng-show指令可以翻译为：当$scope.info == true时，则show()这个元素。当$scope.info == false，则hide()这个元素。

事实上，你可以像这样写你的工具提示元素更冗长（这有利于学习）：

<span class="info_bubble" ng-show="info==true">The Tooltip Text</span>

我注意到您正在使用 jQuery 方法专门尝试在 DOM 中查找元素以便使用它。

Angular方法是改变$scope上的变量。其他 HTML 元素将监视 $scope 上的变量，并将自动根据新值自行更改。 jQuery 方式是伸手去具体触摸并设置一个 DOM 元素上的值。 Angular 方式类似于对着风大喊，"Hey, my name is $scope.info and I'm now true!" 并期望其他元素会听到它并离开，"Ok cool, now I can show myself because $scope.info is true."

这是 jQuery 和 Angular 工作方式的主要区别。

Angular- 在鼠标悬停时获取最近的元素

Angular- Getting closest element on mouseover

mouseover

closest

mousehover

angularjs