鼠标离开无法正常工作

mouse leave not working properly

本文关键字：工作 常工作 离开 鼠标      更新时间：2023-09-26

我有一个场景，当我鼠标输入某些文本时，我需要获取一个输入框，文本应该隐藏，当我离开文本框时，框应该隐藏，我应该显示文本

但这并没有发生

目录

<div ng-app>
<div ng-controller="showCrtl">
   <div ng-hide="showme">
     <p ng-mouseenter="showme=!showme">
       mouse enter
     </p> 
   </div>
   <input type="search" ng-if="showme" ng-mouseleave="showme=false">
 </div>
</div>

.JS：

function showCrtl($scope){
  $scope.showme=false;
}

这是我尝试过的演示

任何帮助，不胜感激。

问题是您在ng-if指令上具有原始值，您知道每当它在DOM上呈现该元素时ng-if确实会创建子作用域。要解决此问题，我建议您做的是，只需通过定义新对象来遵循Dot Rule。然后定义要在该对象中使用的所有属性。

如果你想更深入地挖掘范围继承的工作原理，你可以参考这个答案。

所以在你的代码中，你应该定义一个对象，假设 $scope.model = {}，然后在该对象本身中具有showme属性。无论您在哪里使用showme，请将其替换为 model.showme .

演示小提琴

解决此类范围继承问题的更方便方法是，您可以使用controllerAs模式。由于您不使用控制器内部$scope，您只需将控制器上下文this放置。在视图上使用控制器时，您需要创建它的别名，当您想要获取变量值时，您可以使用变量引用。

问题是您有多个嵌套作用域。输入框中设置的showme与p中设置showme不同。发生这种情况是因为 Angular 隐式地为许多内置指令添加了一个新的作用域(ng-if 就是其中之一(。

您需要确保始终设置和读取相同的showme属性。执行此操作的最简单方法是将 showme 属性添加到控制器。

试试这个：

<div ng-app>
   <div ng-controller="showCrtl">
     <div ng-hide="showCrtl.showme">
       <p ng-mouseenter="showCrtl.showme=!showCrtl.showme">
         mouse enter
       </p> 
     </div>
     <input type="search" ng-if="showCrtl.showme" ng-mouseleave="showCrtl.showme=false">
   </div>
</div>

事实上，作为一般经验法则，切勿直接在模板中访问范围，因为很难确定您正在访问您认为正在访问的范围。始终通过您正在使用的控制器访问属性。

相关文章：