AngularJS와 DOM 요소는 내가이 간단한 지침을 가지고 지침

Question

의 상태에 따라 달라 한마디로

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() 
     } 
     }); 
    } 
    } 
}); 

을 - 나는 다른 아이의 DOM 요소가 value에 따라 작성하고 싶습니다. 예를 들어, value.length이 3보다 크면 유형 1의 요소를 만들고 유형 2의 요소를 만들지 않으려면 1과 다른 템플릿을 만듭니다.

그 우아한 방법은 무엇입니까?

는

Answer 1

당신은 ng-include 지시어를 사용하여 다른 외부 템플릿 URL을로드 할 수 감사합니다. 템플릿 URL의 값은 데이터의 다른 결과에 따라 달라질 수 있습니다.

지시문에 ng-include을 사용하여 제안 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>' 
    }; 
}); 

지시문에 ng-switch을 사용하여 제안 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>' 
    }; 
}); 

기타 posibilities은 (ng-show 선호) 실시 예 ng-if를 사용 가능