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?
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.