AngularJs Meetup South London Collection | this article

Directives are a very powerful concept in Angular. Let's say we want to create a directive to display user profiles. The final directive should be used like this

<profile data="{name:'John', type='twitter'}"/>
<profile data="{name:'Maria', type='facebook'}"/>

Internally we want the directive to change the template being used based on the user type. In order to setup a template for your directive you can use template or templateUrl options.

This would be the initial version

Profile directive (using template)

.directive("profile", function() {
  return {
    template: '<h1 ng-bind="user.name"></h1>',
    scope: {
        user: '=data'
    },
    restrict: 'E'
  };
});

This works fine but still does not take into account the type. We can move the template to a file first and use templateUrl.

Profile directive (using templateUrl)

.directive("profile", function() {
  return {
    templateUrl: 'profile.tpl.html',
    scope: {
        user: '=data'
    },
    restrict: 'E'
  };
});

In order to implement the dynamic template we can't use any of the two so we have to resort to another approach using ng-include. We can't use templateUrl as it has no access to $scope.user.type.

templateUrl: function() { return "profile.tpl.html";} //no access to $scope

Dynamic template using ng-include

.directive("profile", function() {
  return {
    template: '<ng-include src="getTemplateUrl()"/>',
    scope: {
        user: '=data'
    },
    restrict: 'E',
    controller: function($scope) {
      //function used on the ng-include to resolve the template
      $scope.getTemplateUrl = function() {
        //basic handling
        if ($scope.user.type == "twitter")
          return "twitter.tpl.html";
        if ($scope.user.type == "facebook")
          return "facebook.tpl.html";
      }
    }
  };
});

Demo code: link

AngularJs Meetup South London Collection | this article