Javascript ngShow don'；使用自定义指令时无法按预期工作

我有以下代码：

<span ng-mouseover="item.show_description=true" ng-mouseleave="item.show_description=false" pointer="{x: item.x, y: item.y}">
    {{item.label}}
</span>
<div class="description-popup" ng-show="!!item.description && item.show_description"
     style="left: {{item.x}}px; top: {{item.y}}px">
    <h2>{{item.label}}</h2>
    <p>{{item.description}}</p>
    <p>{{!!item.description && item.show_description}}</p>
</div>

---

隔离范围

问题是

ng show

使用了它所在元素的范围。如果它在一个元素上，该元素有一个带有隔离作用域的指令，那么它将使用该隔离作用域，而不能访问外部作用域

在这种特殊情况下，我怀疑

描述弹出窗口

具有隔离作用域，这意味着ng show只能访问该指令的作用域，而该指令可能没有您试图测试的

项

什么是隔离范围？

隔离作用域意味着指令有自己的作用域，而不是从周围的作用域继承。普通作用域继承自周围的作用域，因此它们可以访问该周围作用域上的数据。隔离作用域不起作用

为什么会有人想使用隔离范围

重复使用。如果一个指令打算在很多地方重用，在许多不同的作用域中重用，并且这些作用域上有各种属性，那么您不希望该指令作用域上的属性与周围作用域的属性冲突。而且由于指令应该是完全独立的，并且根本不使用周围的范围，所以给它一个隔离的范围通常是一个好主意。这几乎没有什么缺点。实际上，唯一可能出错的是当有人想在该元素上放置

ng show

或

ng hide

时

解决方案

将您的

ng show

放在

说明弹出窗口周围的额外
上：

<div ng-show="!!item.description && item.show_description">
    <div class="description-popup"
         style="left: {{item.x}}px; top: {{item.y}}px">
        <h2>{{item.label}}</h2>
        <p>{{item.description}}</p>
        <p>{{!!item.description && item.show_description}}</p>
    </div>
</div>


{{item.label}
{{item.description}

{{！！item.description&&item.show_description}


这是假设这是你想要的行为

这可能仅适用于Angular<1.2的版本。在1.2中，隔离作用域的行为似乎已被清除：
放置两个
是否正常
在
项之前。description
？@R3tep这就是在JS中将值转换为布尔值的方法。我想确保它得到布尔值。如果你删除
，存在相同的行为？@R3tep是的，我得到了相同的结果。是否可以创建一个实时演示（例如使用JSFIDLE）？因为您的代码看起来不错。我发现我的代码适用于Angular 1.2，但不适用于以前的版本。您提供的JSFIDLE（我已更改）使用Angular 1.0.6。在我的JSFIDLE中，根据鼠标光标的位置，弹出窗口会出现或消失。这不是您想要的吗？您的代码可以工作，但我认为它与隔离作用域无关，因为在第一个元素上它可以工作。如果ng show无法访问它根本不会显示的项目，它将始终返回false。我对1.2版的评论是针对我的原始代码，而不是您的。它在那个版本中工作，所以它是Angular中的一个bug，而您的代码不知怎么解决了这个问题。我认为隔离作用域在1.2之后仍然表现为这样，但似乎我错了。更多信息：
<div ng-show="!!item.description && item.show_description">
    <div class="description-popup"
         style="left: {{item.x}}px; top: {{item.y}}px">
        <h2>{{item.label}}</h2>
        <p>{{item.description}}</p>
        <p>{{!!item.description && item.show_description}}</p>
    </div>
</div>