Angular.js:ngSwitch显示/隐藏而不是添加/删除DOM元素

时间:2017-10-02 09:40:45

标签: javascript angularjs dom

正如我最近发现的那样,ngSwitch的行为有点像ngIf,因为它直接从DOM中删除元素而不是隐藏它们。现在在我的应用程序中,这对我来说是不必要的昂贵和潜在的问题(如果我需要访问我隐藏的DOM元素的属性)。与此同时,我喜欢ngSwitch语法的清晰度,而不是一堆不同的ngShow指令(这也不允许我包含'默认的'行为)。有没有什么方法可以修改这个指令的工作方式,让它只隐藏元素,而不是完全删除它们?感谢。

3 个答案:

答案 0 :(得分:0)

好的,我更了解你的需求,我之前也有同样的需求。 我建议你使用ngSwitch和这样的自定义指令:



<div ng-switch="mode">
  <directive-a ng-switch-when="a"></directive-a>
  <directive-b ng-switch-when="b">...</directive-b>
  <directive-c ng-switch-default>...</directive-c>
</div>
&#13;
&#13;
&#13;

在您的指令directiveA,directiveB和directiveC的定义中,您使用templateUrl,它将使用指令第二次调用的缓存。

第二种方法是在每个指令上使用ng-show但我更喜欢ng-switch,因为它让dom更轻。

答案 1 :(得分:0)

我知道这有点旧了但我今天遇到了同样的问题而且我设法通过不使用ngSwitch来缓存段视图,而是通过这种方式直接使用段条件来隐藏[hidden]属性:

<ion-segment [(ngModel)]="segmentName">
  <ion-segment-button value="profile">
    Profile
  </ion-segment-button>
  <ion-segment-button value="friends">
    Friends
  </ion-segment-button>
</ion-segment>
<page-profile [hidden]="segmentName != 'profile'" ></page-profile>
<page-friends [hidden]="segmentName != 'friends'" ></page-friends>

只需用[hidden]条件

替换ngSwitchCase

答案 2 :(得分:-1)

不,如果使用ngSwitch,没有任何方法可以将节点隐藏为ngShow和ngHide。如果条件为真,则仅创建ngSwitchWhen节点,所有其他节点都被注释。 ngSwitch的优点是dom会更轻。