0

Tengo un inconveniente al generar dinámicamente div desde angular para html. El inconveniente está en que por cada div debo generar un script, jquery, que lo controle dinámicamente. Con el html no hay problema, genera muy bien, pero el evento clic del jquery no lo reconoce.

Para imprimir dinámicamentedesde el js angular, hago lo siguiente:

Lsttotales = document.getElementById("pnlTotales");
Lstscripts = document.getElementById("pnlscripts");
var a = "";
var b = "";
for(var i = 0; i < $scope.lstResultado.length; i++) {
    a += "<script>$(\"pnlresultado"+i+"\").click(function(){})";
    b += "<div>..."
}
Lstscripts.innerHTML = a;
LstTotales.innerHTML = b;
$compile(document.getElementById('pnlTotales'))($scope);

Cabe mencionar que el script y las listas se presentan correctamente en la vista pero no responde a lo generado que sea scripts, a pesar de que este sí está insertado en el html.

EDIT

tengo generando desde el javascript, angular los diferentes paneles dinámicos según la lista se van agrupando, pero necesito que en cada panel tenga su función contraer y expandir. Lo que no he logrado.

                 for (var i = 0; i < $scope.lstFactura.length; i++) {
                    //Realizar la logica para separar la lista de planillas
                    if (primero == 0) {
                        ruc_IA = $scope.lstFactura[i].ruc_Proveedor_IA;
                        desc_Moneda = $scope.lstFactura[i].desc_Moneda;
                        primero = 1;
                    }


                    if ($scope.lstFactura[i].ruc_Proveedor_IA == ruc_IA && i + 1 < $scope.lstFactura.length && $scope.lstFactura[i].desc_Moneda == desc_Moneda) {

                        $scope.agrupacion[lista].factura.push($scope.lstFactura[i]);
                    }
                    else {
                        if (i + 1 == $scope.lstFactura.length) {
                            $scope.agrupacion[lista].factura.push($scope.lstFactura[i]);
                        }
                        a += "<script type='text/javascript'>" +
                                            "jQuery.document(\"#headerPnlResultado" + i + "\").click(function () {" +
                                                "alert('chemito');" +
                                                "if (jQuery.document(\"#contentPnlResultado" + i + ":first\").is(\":hidden\")) {" +
                                                    "jQuery.document(\"#icoPnlResultado" + i + "\").removeClass(\"fa fa-plus-square fa-lg\");" +
                                                    "jQuery.document(\"#icoPnlResultado" + i + "\").addClass(\"fa fa-minus-square fa-lg\");" +
                                                    "jQuery.document(\"#contentPnlResultado" + i + "\").slideDown(\"slow\");" +
                                                "} else {" +
                                                    "jQuery.document(\"#icoPnlResultado" + i + "\").removeClass(\"fa fa-minus-square fa-lg\");" +
                                                    "jQuery.document(\"#icoPnlResultado" + i + "\").addClass(\"fa fa-plus-square fa-lg\");" +
                                                    "jQuery.document(\"#contentPnlResultado" + i + "\").slideUp();" +
                                                "}" +
                                            "});" +
                                            "</script>";
                        b += "<div id='pnlContenidoDinamico" + i + "' class='panel panel-default' ng-init='variable = \"users" + i + "\"'>" +
                            "<div id='headerPnlResultado" + i + "' class='panel-heading panel-heading-edit'     ng-click='variable = \"dol" + i + "\"'>" +
                                                "<table width='100%'>" +
                                                    "<tr>" +
                                                       "<td width='3%'>" +
                                                            "<div class='content-arrow_box'>" +
                                                                "<div class='arrow_box'>" +
                                                                    "<span class='fa fa-folder-open-o fa-lg' aria-hidden='true'></span>" +
                                                               " </div>" +
                                                           " </div>" +
                                                        "</td>" +
                                                        "<td class='title-tab'>" +
                                                           " <span ng-show='agrupacion[" + lista + "].factura[0].prioridad!=\"\"  && agrupacion[" + lista + "].factura[0].prioridad!=null'>  <span class='fa  fa-ellipsis-v fa-lg' aria-hidden='true'></span> Prioridad: {{agrupacion[" + lista + "].factura[0].prioridad}} <br /></span>" +


                                                           " <span class='fa  fa-ellipsis-v fa-lg' aria-hidden='true'></span>" +
                                                          "  BT: {{agrupacion[" + lista + "].factura[0].cuenta}} - {{agrupacion[" + lista + "].factura[0].nom_Girador}} | RUC: {{agrupacion[" + lista + "].factura[0].ruc}} | Moneda: {{agrupacion[" + lista + "].factura[0].desc_Moneda}} | {{agrupacion[" + lista + "].factura[0].desc_Presuncion}} | {{agrupacion[" + lista + "].factura[0].desc_Linea}}" +

                                                        "</td>" +
                                                        "<td class='ico-title-tab'>" +
                                                            "<i id='icoPnlResultado" + i + "' class='fa fa-minus-square fa-lg' aria-hidden='true'></i>" +
                                                        "</td>" +
                                                     "</tr>" +
                                                "</table>" +
                                            "</div>" +
                                            "<div class='panel-body'>" +
                                                "<div id='contentPnlResultado" + i + "' class='content-tab' ng-class='\"hidden\": variable === \"dol" + i + "\"'>" +
                                                    "<div class='row'>" +
                                                        "<div class='table-responsive col-md-12'>" +
                                                            "<i class='fa fa-file-excel-o' style='color: #009933;' aria-hidden='true'></i>" +
                                                            "<i class='icomoon icon-file-excel' style='color: #009933;' aria-hidden='true'></i>" +
                                                            "<strong> Información Adicional </strong>" +
                                                            "&nbsp;" +
                                                            "<i class='fa fa-angle-double-right' style='color: #009933;' aria-hidden='true'></i>" +
                                                            "<i class='fa fa-angle-double-right' style='color: #009933;' aria-hidden='true'></i>" +
                                                            "<i class='fa fa-angle-double-right' style='color: #009933;' aria-hidden='true'></i>" +
                                                            "&nbsp;" +
                                                            "<strong> Factura(s): </strong> {{FacturasValidas}} <strong> Importe Total: </strong> {{simbolo_moneda}}  {{importe_total|number:2}}" +

                                                            "<span ng-show='Procesados == \"1\"'>" +
                                                                "&nbsp;" +
                                                                "<i class='fa fa-angle-double-right' style='color: #009933;' aria-hidden='true'></i>" +
                                                                "<i class='fa fa-angle-double-right' style='color: #009933;' aria-hidden='true'></i>" +
                                                                "<strong> Factura(s) Procesadas: </strong> {{FacturasValidasOK}}  &nbsp; <strong> Importe Total Procesado: </strong> {{simbolo_moneda}}  {{importe_total|number:2}}" +
                                                            "</span>" +
                                                         "</div>" +
                                                        "<br />" +
                                                        "<div class='table-responsive col-md-12'>" +
                                                            "<table class='table table-hover'>" +
                                                                "<thead>" +
                                                                    "<tr>" +
                                                                        "<th>N°</th>" +
                                                                        "<th>Adquirente</th>" +
                                                                        "<th>Razón Social</th>" +
                                                                        "<th>N° Doc.</th>" +
                                                                        "<th>Monto</th>" +
                                                                        "<th>Detalle</th>" +
                                                                    "</tr>" +
                                                                "</thead>" +
                                                                "<tbody>" +
                                                                    "<tr class='ng-scope' ng-repeat='oFactura in agrupacion[" + lista + "].factura'>" +
                                                                        "<td>{{$index+1}}</td>" +
                                                                        "<td>{{oFactura.ruC_Adquirente}}</td>" +
                                                                        "<td>{{oFactura.nom_Adquirente}}</td>" +
                                                                        "<td>{{oFactura.factura}}</td>" +
                                                                        "<td><p align=right> {{oFactura.simbolo_MDA}} {{oFactura.importe_Neto_Pago_IA|number:2}} </p></td>" +
                                                                        "<td>" +
                                                                            "<button ng-click='btnSeleccionar(oFactura)' data-toggle='modal' data-target='#mdlFactura'" +
                                                                                    "class='btn btn-xs btn-primary' ng-show='oFactura.status=\"0\"'" +
                                                                                    "title='Ver Datos de la Factura'>" +
                                                                                "<span class='fa fa-search' aria-hidden='true'></span>" +
                                                                            "</button>" +
                                                                            "<button ng-click='btnSeleccionar(oFactura)' data-toggle='modal' data-target='#mdlError'" +
                                                                                    "class='btn btn-xs btn-primary' ng-show='oFactura.status==\"1\"'" +
                                                                                    "title='Ver Datos de la Factura'>" +
                                                                                "<span class='fa fa-search' aria-hidden='true'></span>" +
                                                                            "</button>" +
                                                                            "<button ng-click='btnSeleccionar(oFactura)' data-toggle='modal' data-target='#mdlExcel'" +
                                                                                    "class='btn btn-xs btn-primary' ng-show='oFactura.status==\"2\"'" +
                                                                                    "title='Ver Datos de la Factura'>" +
                                                                                "<span class='fa fa-search' aria-hidden='true'></span>" +
                                                                            "</button>" +
                                                                        "</td>" +
                                                                    "</tr>" +
                                                                "</tbody>" +
                                                            "</table>" +
                                                        "</div>" +
                                                    "</div>" +
                                                "</div>" +
                                            "</div></div>";



                        if (i + 1 != $scope.lstFactura.length) {
                            lista++;
                            $scope.agrupacion.push({ factura: [] });
                            ruc_IA = $scope.lstFactura[i].ruc_Proveedor_IA;
                            desc_Moneda = $scope.lstFactura[i].desc_Moneda;                                
                            $scope.agrupacion[lista].factura.push($scope.lstFactura[i]);
                        }
                        lstScripts.innerHTML = a;
                        //$compile(document.getElementById('scripts'))($scope);
                        lstTotales.innerHTML = b;
                        $compile(document.getElementById('pnlTotales'))($scope);
                    }
                }


                //Redireccionamos a la otra página
                //$location.path("/CargaFacturas/Registro");
            }
        }).error(function (error) {
            $('#myModal').modal("hide");
            alert("Muestra panel en vez de esto");

        }).finally(function () {
            $('#myModal').modal("hide");
        });
    };

Este código Jquery dinámico, es decir se va a generar según la lista que se forme. se peuden tener n div con esa propiedad click.

    $('#headerPnlCarga').click(function () {

        if ($("#contentPnlCarga:first").is(":hidden")) {
            $("#icoPnlCarga").removeClass("fa fa-plus-square fa-lg");
            $("#icoPnlCarga").addClass("fa fa-minus-square fa-lg");
            $("#contentPnlCarga").slideDown("slow");
        } else {
            $("#icoPnlCarga").removeClass("fa fa-minus-square fa-lg");
            $("#icoPnlCarga").addClass("fa fa-plus-square fa-lg");
            $("#contentPnlCarga").slideUp();
        }
    });
4
  • Te sugiero coloques el codigo más complet y el error (si lo hay) que se muestre (aún cuando sea en la consola para mejor percepción de tu situación; por ejemplo en el código que pusiste el a+="<script>$("pnlresultado").click..."; debe ser a+="<script>$(\"pnlresultado\").click..."; o que cambies a comillas simple lo externo de la cadena y doble comillas lo interno o viceversa; así mismo en a+="<script>$("pnlresultado").click..."; ¿*$("pnlresultado")* es un tag?; por que de ser id sería $("#pnlresultado") y si fuera una clase $(".pnlresultado"); asi por el estilo...
    – user34391
    el 12 sep. 2017 a las 1:24
  • Hola roberto gracias por tu respuesta. En si no me da ningún error el programa, lo que pasa es que no se ejecuta el jquery que armado en la variable a, la función del click, al html que genera si lo copio y pego en un html este si funciona correctamente por lo que dedusco que sea un problema al generar html desde el javascript
    – Zerart
    el 12 sep. 2017 a las 1:33
  • Pasa usar Angular o angularjs correctamente lo mejor que se puede hacer es ignorar la existencia de jQuery. Y lo crear un tag <script> para añadir más código en lugar de tenerlo ya en tu código es muy rebuscado e innecesario. Creo que deberías replantearte la forma de implementar lo que sea que estás haciendo el 20 sep. 2017 a las 7:20
  • Hola pablo, el problema es que lo hago asi porque intento generar unos paneles, div dinámicos cada uno con un evento independiente. Mi problema está en que mi cliente viene con n facturas de mercado con diferentes items este carga los excel donde yo los agrupo por producto y moneda. Al poderse tener n tipos de productos opté por generar la lista ordenarlo y generar el html desde el javascript
    – Zerart
    el 20 sep. 2017 a las 14:41

1 respuesta 1

0

Si estas utilizando angular evita el uso de JQuery. Es una practica algo "guarra".

Para los eventos click en angular basta con colocar ng-click.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-click-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="">
  <button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
<span>
  count: {{count}}
</span>
</body>
</html>

3
  • Hola, gracias por tu comentario como lo dices quiero cambiar el cambio de estilos que hacia por el ng-click edito la pregunta
    – Zerart
    el 20 sep. 2017 a las 6:06
  • @Zerart Creo que no entiendo bien la pregunta. ¿Que quieres conseguir? Un div que se despliegue y muestre mas información... tipico menu desplegable... el código que has puesto no se ejecuta y no consigo ver lo que buscas.
    – GDP
    el 20 sep. 2017 a las 7:27
  • Asi es asi como está el jquery de la pregunta principal, el inconveniente es que este script es para cada panel. Y en este caso pueso generar n panels, ya que la cantidad depende de u a lista que carga el usuario desde un excel
    – Zerart
    el 20 sep. 2017 a las 16:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.