I would like to create a Pop up and that it appears with a small delay when the view of the home is loaded (Like the pop up with promotions that come out at the beginning of the e-commerce, etc), in angular js you can not load two views, I would like to know if this is done with a directive and how to implement it.
If putting it in a directive or it would not be your decision but you would be forced to create a directive and do this:
<modal-retrazado retrazo="5000" />
It would be best to create a .factory and call the modal from the code and not from the view:
angular.module("app",[]).factory("modalRetrazado",function($timeout){
return {
mostrar:function(retrazo){
$timeout(function(){
var modal = '<div class="modal-content">'+
' <div class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal">×</button>'+
'<h4 class="modal-title">BUENOS DIAS!</h4>'+
'</div>'+
'<div class="modal-body">'+
'<p>ESCRIBE TU ANUNCIO AQUI...</p>'+
'</div>'+
'<div class="modal-footer">'+
'<button type="button" class="close btn btn-default" data-dismiss="modal">Close</button>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
// Agregamos la modal al DOM
$("body").append(modal)
.find(".modal-content .close")
.click(function(){
// cerramos al modal al dar click a cerrar
$(this).closest(".modal-content").remove();
});
},retrazo || 5000);
}
}
})
.controller("NombreControlador",function($scope, modalRetrazado){
modalRetrazado.mostrar(5000)// que inicie a los 5 segundos;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link type="text/css"
rel=stylesheet href="https://getbootstrap.com/dist/css/bootstrap.min.css" />
<div ng-app="app">
<div ng-controller="NombreControlador" />
</div>