How to insert an Angular directive in HTML using an external script?

Question

How to insert an Angular directive in HTML using an external script?

Navigation

#1 by (1 votes)

2

I need to insert a directive inside the code of a calendar that is already implemented in a site I'm creating, but I've encountered a problem: In HTML, the policy is printed normally, but Angular does not process it and replaces its content. In this case, I have modified the calendar script ( fullCalendar.js ) to print the element of a directive of my Angular, but it does not compile.

To illustrate, I made the following example: I created a simple directive, which prints "Hello world" where it is placed. I put a <ola-mundo> tag at the top of the page, which works the way it should. After the loaded page, I create a new <ola-mundo></ola-mundo> element using simple Javascript, and place it inside the page code. This second is not compiled by 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><scriptsrc="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>

I can imagine that the reason for this is for security, so other external scripts do not run Angular code. So, how else can I inject this directive, since the calendar code is inserted by an external script, which is not part of my code?

javascript angularjs angularjs-directives

asked by anonymous 30.03.2016 / 23:24

1 answer

How to save data from multiple MySQL queries? mysql with unique result in PDO

score 1 · Answer 1

This is because you are creating DOM objects without giving Angular the opportunity to compile them.

The code below implements dynamic creation of directives and compilation via service $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><scriptsrc="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>