jQueryがng-repeat結果で動作しない

Question

ng-repeatを使用して、jQueryとTBを使用してアコーディオンを構築しています。何らかの理由で、これは完全にハードコーディングされていますが、ng-repeatディレクティブの内部にあるときにクリックでトリガーできません。

私は問題が事実の後に読み込まれたバインディング要素ではないと考えていました。だから、私は、ページの読み込みにスクリプトを読み込むのではなく、データが返されるときに.successに関数をロードする方が良いと考えました。残念ながら、私はこの作業を行う方法を理解することはできません。

テストページ：http://staging.converge.io/test-json

コントローラー：

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の（NGリピートの外で動作します）任意の助け

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

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

ありがとう！

Answer 1

これらのハンドラは実行時にバインドされているため、リテラルの回答は.panel-headingが存在しないためです。あなたは角を使用しているので、あなたはイベント委任今

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

を必要とする、すべてのDOM操作はディレクティブではなく、jQueryの内で処理されなければなりません！ ng-clickハンドラまたは単純な指令を繰り返す必要があります。

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

そして、ディレクティブコード：角度はそのレンダリングを終了した後、あなたはjqueryのか、他のJavaScriptコードを実行することができます

.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

。詳細については、この回答を参照してくださいhttps://stackoverflow.com/a/20421291/2002079

Answer 3

ng-repeatを使用し、jqueryのクリックイベントをトリガする必要がある場合は、これが私に役立ちます。

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

    //your code here... 

    });