Coleção AngularJs Meetup South London | Este artigo

As diretivas são um conceito muito poderoso no Angular. Digamos que desejamos criar uma diretiva para exibir perfis de usuário. A diretiva final deve ser usada assim

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

Internamente, queremos que a diretiva mude o modelo que está sendo usado com base no tipo de usuário. A fim de modelo de uma instalação para a sua diretiva você pode usar modelo ou templateUrl opções.

Esta seria a versão inicial

Diretiva de perfil (usando modelo)

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

Isso funciona bem, mas ainda não leva em consideração o tipo. Podemos mover o modelo para um arquivo primeiro e usar templateUrl.

Diretiva de perfil (usando templateUrl)

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

Para implementar o template dinâmico, não podemos usar nenhum dos dois, então temos que recorrer a outra abordagem usando ng-include . Não podemos usar templateUrl porque ele não tem acesso a $ scope.user.type.

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

Modelo dinâmico usando 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";
      }
    }
  };
});

Código de demonstração: link

Coleção AngularJs Meetup South London | Este artigo