Angular.js 1.4 – Como adicionar uma directive dentro de outra directive

app.controller('DrallCtrl', function($scope) {
  $scope.numbers=[0,1,2,3,4,5,6];
});

app.directive('drallRepeat', function($compile){
  return  {
    //Prioridade mais alta significa executar primeiro
    priority: 5000,
    //Impede a compilação de qualquer outra directive no primeiro pass
    terminal: true,
    compile: function(element, attrs){
      //Vamos aqui adicionar ng-repeat ao dom
      attrs.$set('ngRepeat', attrs.myRepeat);

      //Acima, foi adicionado a directive ng-repeat ao elemento.
      //Será ignorado durante a compilação directives com prioridades 5000 ou inferiores para evitar
      //recursões infintas e da mesma forma, não é desejado se compilar novamente
      var compiled =  $compile(element, null, 5000);
      return function(scope){
        //Quando na fase de linking, apenas delega para a função de link o retorno da compilação
        compiled(scope);
      }
    }
  }
})

Modo de usar:

<body ng-controller="DrallCtrl">

	<ul>
    	Esta lista foi gerada por um "drall-repeat" directive que via programação adicionou um "ng-repeat" ao elemento li.

		<li drall-repeat="numero in numeros">{{numero}}</li>

	</ul>

</body>

Neste caso, este é apenas um simples uso da técnica para ilustrar como você poderia fazr.

É transformado uma directive “drall-repeat”, adicionando uma directive ‘ng-repeat’ de forma dinâmica com a mesma expressão. É possível modificar este exemplo para atender às suas necessidades, adicionando diferentes atributos a directive, dependendo dos valores de determinadas condições.

O código acima tem os seguintes benefícios:

Nada é recompilados.
- Simplesmente é feito uma pausa compilação, altera-se o dom e, em seguida, continua-se de onde parou.
Nenhuma manipulação louca ou clonagem de dom
- Há pessoas que tentam estas técnicas, usam funções de clones ou coisas estranhas como transclude. O dom aqui é intocável (exceto se adicionar atributos a ele)
Atributo da directive original permanecem no dom.

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: