0

Estou tentando usar a opção restrict com o valor 'M' (para o angular trabalhar através de comentários) para criar uma diretiva. Porém o comentário não está incorporando o valor que eu estou adicionando em template.

Veja:

angular.module('example', [])
.directive('stackoverflow', function () {

    return {
         restrict: 'M',
         template: '<div>my name is wallace</div>'
    };
});
<div ng-app="example">
    <!-- directive: stackoverflow -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Se eu fizer com a A ou E (para ler atributos ou elementos, respectivamente), funciona perfeitamente:

angular.module('example', [])
.directive('stackoverflow', function () {

  return {
    restrict: 'AE',
    template: '<div>my name is wallace</div>'
  };
});
<div ng-app="example">
  <div stackoverflow></div>
  <stackoverflow></stackoverflow>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Por que a diretiva com restrição M não funcionou no primeiro exemplo?

2 Respostas 2

3

Um comentário não pode possuir elementos-filhos. Entretanto você pode compilar o elemento resultante da avaliação do controller após o comentário em si:

angular.module('example', [])
.directive('stackoverflow', function ($compile) {

    return {
         restrict: 'M',
         template: '<div>my name is wallace</div>',
         link: function (scope, element, attrs)
         {
             console.log(element[0].innerHTML);
             element.after($compile(element[0].innerHTML)(scope));
         }
    };
});
<div ng-app="example">
    <!-- directive: stackoverflow -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

2

Como complemento à resposta do OnoSendai, gostaria de acrescentar que ao adicionar a propriedade replace: true, as diretivas com restrição M passam a funcionar com template.

Veja:

angular.module('example', [])
.directive('stackoverflow', function () {

  return {
    replace: true,
    restrict: 'M',
    template: '<div>my name is wallace</div>'
  };
});
<div ng-app="example">
  <!-- directive: stackoverflow -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

1
  • Funcionou muito bem. Commented 2/09/2016 às 14:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .