Question

我是Angular JS的新手，我正在尝试创建一个用于学习的小型Web应用程序..我正在尝试在mouseover上制作工具提示文本，但我不确定如何完成“Angular方式” ” ..

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

我尝试使用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（）”和“nearest（）”但是无法得到它工作

当我尝试鼠标悬停元素时，我得到“这不是一个函数”

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方式类似于向风呼喊，“嘿，我的名字是$scope.info，我现在是真的！”并且期待其他一些元素会听到它然后说：“好吧，现在我可以证明自己，因为$scope.info是真的。”

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

Angular-鼠标悬停时获得最接近的元素

1 个答案: