2016-05-24 2 views
3

Ich habe ein ng-repeat, das wie eine switch-Bedingung funktioniert, die angibt, welche Vorlage gerendert werden soll. Ich benutze ng-wenn innerhalb der ng-Wiederholung, um dies zu erreichen. Das Problem? Es evaluiert immer noch die Vorlagen innerhalb von ng - wenn die Bedingung auch als falsch ausgewertet wird, was dazu führt, dass die gesamte Sache langsam ist.Gibt es eine Möglichkeit zu verhindern, die Vorlage in ng-if zu bewerten, deren Bedingung als falsch ausgewertet wird?

<div ng-repeat="i in ..."> 
    <div ng-if="i == 'something1'"> 
    if this is false, do not evaluate this entire stuff 
    .... some complex template goes here 
    </div> 
    <div ng-if="i == 'something2'"> 
    if this is false, do not evaluate this entire stuff 
    .... another complex template goes here 
    </div> 
</div> 

Wenn die Vorlage innerhalb jeder der ng-wenn komplex und es gibt 20 ng-wenn innerhalb ng-repeat und nur ein ng-wenn auswertet auf true dann 19 weitere Vorlagen werden verschwenden Rechenressourcen.

Was kann ich tun, um dies zu mildern, ohne auf einen programmatischen Ansatz zurückzugreifen und eine bidirektionale Bindung für die Vorlage beizubehalten, die gerendert wird?

Antwort

0

ng-if entfernt Elemente aus dem HTML-Code, wenn die Bedingung falsch ist. Daher kann es vorkommen, dass vor dem Auftreten des Problems eine Auswertung & ausgewertet wird. Wenn Sie ng-include innerhalb von ng-if verschachteln, werden die Vorlagen, die Sie über ng-include laden, niemals ausgewertet.

Etwas wie folgt aus:

<body ng-app="app"> 
    <div ng-controller="myController as ctrl"> 
     <div ng-if=true> 
      Hi 
      <div>{{ctrl.log(true)}}</div> 
     </div> 
     <div ng-if=false> 
      Bye 
      <ng-include src="foo.html"></ng-include> 
      <div>{{ctrl.log(false)}}</div> 
     </div> 

    </div> 
    <script> 
     angular.module('app', []).controller("myController",myController); 

     function myController($scope){ 
      var ctrl = this; 

      ctrl.log=function(val) {  
       console.log(val); 
       return val; 
      } 
     }; 
    </script> 
</body> 
Verwandte Themen