jQuery没有使用ng-repeat结果

我正在使用ng-repeat来构建一个使用jQuery和TB的手风琴。 出于某种原因,这在硬编码时工作正常,但在ng-repeat指令内部无法触发。

我当时认为问题是来自jQuery而不是事后加载的绑定元素。 所以,我认为不是在页面加载时加载脚本,而是在返回数据时在.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

  
Impact score: {{ruleResult.ruleImpact*10 | number:0 | orderBy:ruleImpact}}

jQuery (在ng-repeat之外工作)

 $('.panel-heading').on('click', function() { var $target = $(this).next('.panel-collapse'); if ($target.hasClass('collapse')) { $target.collapse('show'); }else{ $target.collapse('hide'); } }); 

谢谢你的帮助!

字面答案是因为这些处理程序在运行时绑定,因此.panel-heading不存在。 你需要事件授权

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

现在,既然你正在使用Angular,那么所有DOM操作都应该在一个指令中处理,而不是jQuery! 您应该重复ng-click处理程序或简单指令。

 

和指令代码:

 .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"); }); } } }); 

当我们使用ng-repeat并需要触发jquery click事件时,试试这个对我有用。

  $(document).on("click", ".className", function() { //your code here... }); 

在角度完成渲染后,您可以运行jquery或任何其他javascript代码。 有关详细信息,请参阅此答案: https : //stackoverflow.com/a/20421291/2002079