AngularJS dom element depend on condition in directive

Question

I got this simple directive :

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

In short - I would like to create a different child dom element depends on the value. For example, if value.length bigger than 3, create some element of type 1, and if not to create element of type 2 (different template from 1).

Whats the elegant way to do that?

Thank you

And what are the possibilities in type? A different input type? Or a different way of showing data? Or...? — daan.desmedt, Jul 28 '16 at 14:24
Im talking about create different child template, depends on the result from the scope :) — Chenko47, Jul 28 '16 at 14:26
Simply use `ng-if="allParticipants.length > 3"` in your template on elements that should only be displayed in "fullParticipants" view? — dex, Jul 28 '16 at 14:31
thank you but I did it at first, but I think its dont the best way to do that.. — Chenko47, Jul 28 '16 at 14:35
Depends on the differences between the templates and the bindings. I would rather use one template to display information of one item - can you show us the templates? — dex, Jul 28 '16 at 14:39

daan.desmedt · Accepted Answer · 2016-07-28T14:56:43.813

You could load a different external template URL using the ng-include directive. Value of the template url can be according the different result of the data.

Proposition using ng-include on directive 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 using ng-switch on directive 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>'
  };
});

Other posibilities are possible using example ng-if (preferred over ng-show)

If you don't want external html files per type, see updated answer :) — daan.desmedt, Jul 28 '16 at 14:57

AngularJS dom element depend on condition in directive

1 Answers1