JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<div ng-app="app">
  <div ng-controller="controlador">
  <button crear-boton>Crear boton</button>
  <div id="espacioParaelBoton"></div>
   </div>
</div>

JavaScript

var app = angular.module('app')

app.controller('controlador',function($scope){
   $scope.console = function(){
     alert('auto click')
   }
})

app.directive('doAutoClick',['$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      priority: -1,
      link: function($scope, iElm, iAttrs, controller) {
        
        $timeout(function(){
         iElm.triggerHandler('click'); 
},500)  
          //podemos modificar los eventos
          //click, hover, focus, etc

      }
    };
  }
]);

app.directive("crearBoton", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){
                angular.element(document.getElementById('espacioParaelBoton')).append($compile("<div><button ng-click='console()'  do-auto-click>boton generado automaticamente</button></div>")(scope));
//podemos añadirle al botón directivas, estilos y funciones de ng, gracias al método $compile de angular
        });
    };
});