Question

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

但这没有发生

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

的内容

感谢任何帮助。

Answer 1

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

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

因此，在您的代码中，您应该定义一个对象，即$scope.model = {}，然后在该对象本身内具有showme属性。无论您在视图中使用showme，都可以将其替换为model.showme。

Demo Fiddle

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

Answer 2

问题是您有多个嵌套范围。输入框中设置的showme与showme中设置的p不同。这是因为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>

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

鼠标离开不正常

2 个答案: