指令ng-show替代品

时间:2012-12-12 13:01:21

标签: angularjs

我有一个应该显示痕迹导航的控件。它需要数据(路线和标题)才能正确显示导航。数据来自范围并在指令中使用。

导致我的问题的原因是我在控件中使用了一个应该翻译标题的本地化指令。即使ng-show中的表达式被评估为false,也会调用此本地化指令。然后本地化指令中的转换以异常结束,因为它试图转换不正确的字符串(请参阅http://jsfiddle.net/F97wn/7/中的'localize'指令)。

这看起来很奇怪。我希望如果确定内部内容应该是可见的还是隐藏的,那么首先评估它,然后评估内部内容..

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

问题是:我应该如何解决问题 - 使用什么而不是ng-show

一个例子是http://jsfiddle.net/F97wn/7/

3 个答案:

答案 0 :(得分:2)

您可以使用ngSwitch代替设置为“toshow()”的内部部件和内部ng-switch-when =“true”部分,以使您的自定义指令位于该区域内。如果toshow的值不为真,则不会执行自定义指令。

答案 1 :(得分:1)

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

  1. 属性数据 - 例如,localize =“...”show-me =“...”
  2. 在与ctrl相关的范围上定义的内容 - 例如$ scope.showMe。根据您当前定义指令的方式,指令范围可以作为scope.showMe访问此属性。
  3. 或将服务(包含数据)注入指令 - 例如,指令('localize',function(myShowMeService){...}

答案 2 :(得分:0)

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

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