New question

Question:

Date: 02-08-2016 09:29:11 (In Spanish)

Duda sobre evento ng-click en AngularJS[Resolved]

Buenas tardes tengo un evento ng-click, el cual al activarlo me carga varios elementos dinamicamente, mi problema es que cuando se hace esto no deberia de funcionar mas el evento, es decir si cargo ya los elementos dinamicos, al activar el evento no debería de dispararse, de que manera puedo hacer esto

<a ng-click="comment(post.url)" class="btn btn-icon-toggle">
 <i class="fa material-icons">textsms</i>
</a>



$scope.comment = function(data){
        var url=APP_URL+'/pluscommentsone';
        $.post(url,{post:data,_token:CSRF_TOKEN},function(response){
                if (typeof response['html'] !== "undefined"){
                    angular.element(document.getElementById("form-"+data)).css("display","block");
                    angular.element(document.getElementById("list-comment-"+data)).css("display","block");
                    angular.element(document.getElementById("target-comment-"+data)).css("display","block");
                    angular.element(document.getElementById("list-comment-"+data)).append(response['html']);
                    $(document).ready(function($){
                    angular.element(document).injector().invoke(function($compile){
                        var obj=$('#list-comment-'+data); // get wrapper
                        var scope=obj.scope(); // get scope
                        $compile(obj.contents())(scope);
                        
       angular.element(document.getElementById("countcomment-"+data)).attr("ng-click","comment("+data+",0)");
                        var click = $('countcomment-'+data);
                        var scope=click.scope(); // get scope
                        $compile(click.contents())(scope);
                        
                        var footer=$('.footer-'+data); // get wrapper
                        var scope=footer.scope(); // get scope
                        $compile(footer.contents())(scope);
                        $scope['status-'+data]= 0;
                        
                    });
                   });
                }
                if (typeof response['errors'] !== "undefined"){
                      $.each(response.errors,function(k,error){
                            alert(error);
                      });

                }
        });  
    };
Tags: AngularJS - Javascript - Question Votes: 1 - Answers: 4 - Views: 8 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 02-08-2016 11:04:59 Hola Mauricio, antes que nada te aclaro que no se mucho de AngularJS, pero creo que puedes utilizar "ng-disabled", algo como:

        <a ng-click="comment(post.url)" ng-disabled="botonx" class="btn btn-icon-toggle">
         <i class="fa material-icons">textsms</i>
        </a>
    


    y luego en tu código JS haces esto:
    $scope.botonx= true;


    Se que se utiliza para los input type button, no se si te va a funcionar en el link.

    Saludos!
      Votes: 2 - Link answer
     
  • Date: 03-08-2016 04:22:47 es que mira ese evento se dispara para n cantidad de post, es decir cada post tiene este evento que carga los comentarios de este, los post estan en un timeline, por ello ese true tendria que estar en una variable dinamica o mejor dicho una variable que cambie de nombre para cada post y asi evitar el evento la otra seria volver a como lo tenia antes con jquery pero esto no lo quiero hacer francamente   Votes: 1 - Link answer
     
  • Date: 03-08-2016 05:59:22 Entiendo, entonces podrías colocar un identificador único para cada post, valiendote del ID de post, por ejemplo:

    <div class="test" ng-controller="Ctrl">
      <button ng-click="comment(['www.phpcentral.com'],[59]);" ng-disabled="boton59">textsms</button>
    <div>
    


    y luego en tu código JS haces esto:
    var app = angular.module('app', []);
    function Ctrl($scope) {  
      $scope.comment = function(url, botonid){
        alert("Los parametros enviados son, url:"+url + ', id:' + botonid);
        $scope['boton'+botonid]= true;
      };
    };
    


    La forma de colocar ese ID será desde PHP al momento de listar los post con algo como:

    <div class="test" ng-controller="Ctrl">
      <button ng-click="comment(['www.phpcentral.com'],[<?php echo $post->getId();?>]);" ng-disabled="boton<?php echo $post->getId();?>">textsms</button>
    <div>
    


    Lo he probado y funciona bien, link a la demo: http://jsfiddle.net/3dd74r2w/

    Espero que mi respuesta te sea de ayuda, saludos y buen código!
      Votes: 1 - Link answer
     
  • Date: 03-08-2016 06:19:05 muchas gracias mi hermano por tu ayuda pero tambien di con una manera algo mas artesanal

     $scope.comment = function(data){
            var url=APP_URL+'/pluscommentsone';
            $.post(url,{post:data,_token:CSRF_TOKEN},function(response){
                    if (typeof response['html'] !== "undefined"){
                        angular.element(document.getElementById("form-"+data)).css("display","block");
                        angular.element(document.getElementById("list-comment-"+data)).css("display","block");
                        angular.element(document.getElementById("target-comment-"+data)).css("display","block");
                        angular.element(document.getElementById("list-comment-"+data)).append(response['html']);
                        $(document).ready(function($){
                        angular.element(document).injector().invoke(function($compile){
                            var obj=$('#list-comment-'+data); // get wrapper
                            var scope=obj.scope(); // get scope
                            $compile(obj.contents())(scope);
                            
                            angular.element(document.getElementById("idpostbtn-"+data)).empty();
                            var btn = "<a class='btn btn-icon-toggle'>"+
                                      "<i class='fa material-icons' style='color: #8C2F88;font-size: 18px;'>textsms</i>"+
                                      "</a>";
                            angular.element(document.getElementById("idpostbtn-"+data)).append(btn);
                            
                            var newbnt=$("idpostbtn-"+data);
                            var scope=newbnt.scope(); 
                            $compile(newbnt.contents())(scope);
                            
                            var footer=$('.footer-'+data); // get wrapper
                            var scope=footer.scope(); // get scope
                            $compile(footer.contents())(scope);
                         });
                       });
                    }
                    if (typeof response['errors'] !== "undefined"){
                          $.each(response.errors,function(k,error){
                                alert(error);
                          });
    
                    }
            });  
        };
    


    si puedes ver creo una variable llamada btn, en la cual cargo un nuevo boton en limpio, elimino el boton anterior, cargo el nuevo y compilo en el DOM, con eso solucione el problema
      Votes: 1 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In