2

Preciso inserir uma diretiva dentro do código de um calendário que já está implementado em um site que estou criando, mas encontrei um problema: no HTML, a diretiva é impressa normalmente, mas o Angular não a processa e substitui seu conteúdo. No caso, eu modifiquei o script do calendário (o fullCalendar.js) para imprimir o elemento de uma diretiva minha do Angular, mas ela não compila.

Para exemplificar, fiz o seguinte exemplo: criei uma diretiva simples, que imprime "Olá mundo" onde ela for colocada. Coloquei uma tag <ola-mundo> no começo da página, que funciona como deve funcionar. Depois da página carregada, eu crio um novo elemento <ola-mundo></ola-mundo> usando Javascript simples, e coloco dentro do código da página. Esse segundo não é compilado pelo Angular.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {

});

app.directive('olaMundo', function() {
  return {
    restrict: 'E',
    template: '<p>Olá mundo</p>'
  };
});

$(document).ready(function() {
  var elemento = document.createElement('ola-mundo');
  var ola_mundo = document.getElementById('ola-mundo');
  ola_mundo.appendChild(elemento);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="app" ng-controller="MainCtrl">
  <p>
    <b>Aqui a diretiva deve imprimir normalmente:</b>
  </p>
  <ola-mundo></ola-mundo>
  <br />
  <br />
  <br />
  <p>
    <b>Aqui a diretiva é injetada por um script, e não funciona:</b>
  </p>
  <div id="ola-mundo"></div>
</body>

Consigo imaginar que a razão disso é por segurança, para outros scripts externos não executarem código do Angular. Sendo assim, de que outra forma posso injetar essa diretiva, já que o código do calendário é inserido por um script externo, que não faz parte do meu código?

3
  • Veja a restrição que você estás usando, 'E', 'A' ou 'C' ou 'EAC'? Commented 1/04/2016 às 19:59
  • Recomendo fazer o curso, eu fiz, vale a pena. Commented 1/04/2016 às 20:00
  • @IvanFerrer só usei o E nesse exemplo, mas não precisa mais que isso. Esse foi o curso que assisti quando comecei a usar Angular há uns meses, mas ele não se aprofunda nem um pouco. Foi ótimo pra começar, mas pra aprofundar o melhor lugar mesmo é a referência da framework. Commented 1/04/2016 às 23:09

1 Resposta 1

1

Isso acontece porque você está criando objetos do DOM sem dar ao Angular a oportunidade de compilá-los.

O código abaixo implementa criação dinâmica de diretivas e compilação via serviço $compile:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope,$compile) {

  $scope.adicionarDiretiva = function(){
    angular.element(
      document.getElementById('controlplaceholder'))
    .append($compile("<ola-mundo></ola-mundo>")($scope));
  };});

app.directive('olaMundo', function() {
  return {
    restrict: 'E',
    template: '<p>Olá mundo</p>'
  };});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body ng-app="app" ng-controller="MainCtrl">
  <p>
    <b>Aqui a diretiva deve imprimir normalmente:</b>
  </p>
  <ola-mundo></ola-mundo>
  <br />
  <br />
  <button ng-click='adicionarDiretiva()'>Criar dinamicamente</button>
  
  <br />
  <p>
    <b>Aqui a diretiva é injetada dinamicamente:</b>
  </p>
  <div id="controlplaceholder"></div>
</body>

1
  • 1
    O código que insere o <ola-mundo> não fica dentro do código do Angular, esse é o problema. É o script do calendário, que é só escrito usando jQuery (e não angular) que insere essa tag no DOM. Mas isso já explica metade da questão, que é sobre como compilar o código depois do próprio Angular o fazer. Outra pergunta: porquê colocar ($scope) depois do $compile, e sem usar um . entre eles? Commented 1/04/2016 às 22:57

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 .