指令 ng-show 替代品答案

【问题标题】：Directive ng-show alternatives指令 ng-show 替代品
【发布时间】：2012-12-12 13:01:21
【问题描述】：

我有一个应该显示面包屑导航的控件。它需要数据（路线和标题）才能正确显示导航。数据取自作用域并在指令中使用。

导致我出现问题的原因是我在控件中使用了本地化指令来翻译标题。即使ng-show 中的表达式被评估为假，也会调用此本地化指令。然后本地化指令中的翻译以异常结束，因为它试图翻译不正确的字符串（请参阅http://jsfiddle.net/F97wn/7/ 中的“本地化”指令）。

这似乎很奇怪。我希望如果某些东西设置了内部内容应该是可见还是隐藏，那么首先评估它，然后再评估内部内容..

好的，然后我发现ng-show 只设置了一些css属性，所以对我来说没什么用。

问题是：我应该如何解决这个问题 - 用什么来代替 ng-show？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以使用ngSwitch 而不是将 on 部分设置为“toshow()”，并将内部 ng-switch-when="true" 部分设置为该区域内的自定义指令。如果 toshow 的值不为真，这将不会执行自定义指令。

【讨论】：

【解决方案2】：

如果指令抛出异常，可能应该通过以下方式之一将更多信息传递给指令，以便指令可以决定它是否具有执行其需要执行的操作所需的信息：

属性数据——例如，localize="..." show-me="..."
在与 ctrl 关联的范围内定义的东西——例如，$scope.showMe。根据您当前定义指令的方式，指令作用域将可以作为 scope.showMe 访问此属性。
或将服务（具有数据）注入指令 - 例如，directive('localize', function(myShowMeService) { ... }

【讨论】：

这些解决方案看起来像是针对这种情况的解决方法。这就是为什么我一直在寻找 angular 本身提供的解决方案。无论如何，感谢您的回答和上面的评论。 +1
@stej，考虑换一种方式考虑：如果指令在 DOM 中，它将“运行”。 IMO，必须编写额外的 HTML/指令才能将面包屑指令从 DOM 中取出（在某些情况下），这样它就不会运行是一种解决方法。如果你打算在其他项目中重用这个面包屑组件，我认为让它独立/自包含会更好，并且不需要额外的 HTML/指令来使用它。 IMO，“Angular 解决方案”是通过给它一些额外的属性来编写一个稍微复杂的指令。

【解决方案3】：

您可能还想查看<ng-if>。 ngIf 指令根据表达式中评估的“虚假”和“真实”值有条件地删除并重新创建 DOM 树 (HTML) 的一部分。根据您的需要，它可能比<ng-show> 更直观。

但是，它目前仅在 AngularJS 的不稳定版本中可用。如果您可以使用该版本的 AngularJS，您可以找到有关它的更多信息here。

【讨论】：