javascript - 鼠标离开无法正常工作

我有一种情况，当我在某些文本上输入鼠标时，我需要得到一个输入框，并且文本应该隐藏，而当我离开文本框时，该框应该隐藏并且我应该显示文本

但这没有发生

HTML

<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;
}

这是我尝试过的DEMO

任何帮助表示赞赏。

最佳答案

问题是您在ng-if指令上具有原始值，您知道ng-if确实会在DOM上呈现该元素时创建子作用域。要解决此问题，我建议您做的是，只需按照Dot Rule定义新对象即可。然后定义要在该对象内部使用的所有属性。

如果您想更深入地了解范围继承的工作原理，可以参考this answer。

因此，在代码中，您应该假设一个对象，即$scope.model = {}，然后在该对象本身内部具有showme属性。并且无论您在视图上使用showme哪里都将其替换为model.showme。

Demo Fiddle



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