jQuery non funziona con risultati di ng-ripetizione

Question

Sto usando ng-repeat per costruire una fisarmonica usando jQuery e TB. Per qualche ragione, questo funziona perfettamente quando è codificato, ma non si attiva al clic quando si trova all'interno della direttiva ng-repeat.

Stavo pensando che il problema è da elementi jQuery non vincolanti caricati in dopo il fatto. Quindi, ho pensato che invece di caricare lo script al caricamento della pagina, sarebbe meglio caricare la funzione su .successo quando i dati vengono restituiti. Sfortunatamente, non riesco a capire come farlo funzionare.

pagina di prova: http://staging.converge.io/test-json

controller:

function FetchCtrl($scope, $http, $templateCache) { 
     $scope.method = 'GET'; 
     $scope.url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=http://www.web.com&key=AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc'; 
     $scope.key = 'AIzaSyA5_ykqZChHFiUEc6ztklj9z8i6V6g3rdc'; 
     $scope.strategy = 'mobile'; 

     $scope.fetch = function() { 
      $scope.code = null; 
      $scope.response = null; 

      $http({method: $scope.method, url: $scope.url + '&strategy=' + $scope.strategy, cache: $templateCache}). 
      success(function(data, status) { 
       $scope.status = status; 
       $scope.data = data; 
      }). 
      error(function(data, status) { 
       $scope.data = data || "Request failed"; 
       $scope.status = status; 
      }); 
     }; 

    $scope.updateModel = function(method, url) { 
     $scope.method = method; 
     $scope.url = url; 
    }; 
} 

HTML:

  <div class="panel-group" id="testAcc"> 

       <div class="panel panel-default" ng-repeat="ruleResult in data.formattedResults.ruleResults"> 
        <div class="panel-heading" toggle-collapse> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse-next" href=""> 
           {{ruleResult.localizedRuleName}} 
          </a> 
         </h4> 
        </div> 
        <div class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <strong>Impact score</strong>: {{ruleResult.ruleImpact*10 | number:0 | orderBy:ruleImpact}} 
         </div> 
        </div> 
       </div> 
      </div> 

jQuery(lavora al di fuori della ng-repeat)

$('.panel-heading').on('click', function() { 
    var $target = $(this).next('.panel-collapse'); 

    if ($target.hasClass('collapse')) 
    { 
     $target.collapse('show'); 
    }else{ 
     $target.collapse('hide'); 
    } 
}); 

Grazie per qualsiasi aiuto!

Answer 1

La risposta letterale è perché questi gestori sono vincolati al runtime, pertanto .panel-heading non esiste. È necessario delegazione evento

$(".panel").on("click", ".panel-heading", function() { 

Ora, dal momento che si sta utilizzando angolare, tutte manipolazione del DOM dovrebbero essere gestiti all'interno di una direttiva, non jQuery! Dovresti ripetere un gestore ng-click o una semplice direttiva.

<div class="panel-heading" toggle-collapse my-cool-directive> 

E il codice direttiva:

.directive("myCoolDirective", function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      $(elem).click(function() { 
       var target = $(elem).next(".panel-collapse"); 
       target.hasClass("collapse") ? target.collapse("show") : target.collapse("hide"); 
      }); 
     } 
    } 
}); 

Answer 2

È possibile eseguire un jQuery o qualsiasi altro codice JavaScript dopo l'angolare finisce il suo rendering. Per ulteriori dettagli, vedere questa risposta: https://stackoverflow.com/a/20421291/2002079

Answer 3

Quando si utilizza ng-repeat e si deve attivare un evento click jquery, basta provare questo per me.

$(document).on("click", ".className", function() { 

    //your code here... 

    });