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-showよりも好ましい）例ng-if

を用い 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-switchを用いて指令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-includeを用い

命題