AngularJS dom Element hängt unter der Bedingung, in der Richtlinie

Question

ich diese einfache Anweisung bekam:

app.directive('participants',function(){ 
    return{ 
    restrict:'E', 
    scope:{ 
     allParticipants:"=", 
     appendOption:"=" 
    }, 
    templateUrl:'/templates/participants.html', 
    link: function(scope,element,attr){ 
     scope.$watch('allParticipants',function(value){ 
     if (value){ 
      value.length > 3 ? showShortParticipants() : showFullParticipants() 
     } 
     }); 
    } 
    } 
}); 

Kurz gesagt - ich möchte ein anderes Kind dom Element auf den value hängt erstellen. Wenn beispielsweise value.length größer als 3 ist, erstellen Sie ein Element vom Typ 1, und wenn nicht, erstellen Sie ein Element vom Typ 2 (andere Vorlage als 1).

Was ist der elegante Weg, das zu tun?

Danke

Answer 1

Sie eine andere externe Vorlage URL laden konnte die ng-include Direktive. Der Wert der Vorlage-URL kann dem unterschiedlichen Ergebnis der Daten entsprechen.

Proposition mit ng-include auf Direktive template

app.directive('participants', function() { 
    return { 
    restrict: 'E', 
    scope:{allParticipants:"=",appendOption:"="}, 
    link: function($scope) 
    { 
     $scope.$watch('allParticipants', function(value) 
     { 
     // determine template url 
     var tempVal; 
     switch (value){ 
      case 1: 
       tempVal = 'template1'; 
       break; 
      case 2: 
       tempVal = 'template2'; 
       break; 
      default: 
       tempVal = 'templatedefault'; 
       break; 
     }  
     // set scope value 
     $scope.templateURL = 'templates/' + tempVal + '.html';  
     }); 
    }, 
    template: '<ng-include src="templateURL"></ng-include>' 
    }; 
}); 

Proposition mit ng-switch auf Direktive template

app.directive('participants', function() { 
    return { 
    restrict: 'E', 
    scope:{allParticipants:"=",appendOption:"="}, 
    template: '<div ng-switch on="allParticipants">' + 
     '<div ng-switch-when="1">Type 1</div>' + 
     '<div ng-switch-when="2">Type 2</div>' + 
     '<div ng-switch-when="3">Type 3</div>' + 
    '</div>' 
    }; 
}); 

Andere posibilities sind möglich unter Verwendung von Beispiel ng-if (bevorzugt über ng-show)