jQuery不适用于ng-repeat结果

我正在使用ng-repeat使用jQuery和TB构建手风琴。出于某种原因，这在硬编码时可以很好地工作，但在ng-repeat指令内部点击时无法触发。jQuery不适用于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：

  <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'); 
    } 
});

感谢您的帮助！

来源

2013-12-09 Joe Conlin

字面上的答案是因为这些处理程序在运行时绑定，因此.panel-heading不存在。您需要事件代表团

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

现在，由于您使用的角度，所有的DOM操作应该是一个指令，而不是jQuery的内部处理！您应该重复ng-click处理程序或简单的指令。

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

而且该指令代码：

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

来源

2013-12-09 22:24:00 tymeJV

这是我一直在寻找的答案，虽然我是Angular的新手，但无法弄清楚如何将自定义指令添加到我的代码中。从我读过的所有内容看来，我似乎需要将所有内容都移动到一个模块中，以便能够像这样添加指令？它是否正确？如果是的话，我是否需要改变控制器写入的方式，因为我发现它是在模块的其他代码中完成的？我真的很想学习在Angular中做到这一点的“正确”方式。再次，对于我在这里缺乏经验感到抱歉。谢谢。 –

只需声明一个新文件'''''''''''''''''''''''''''''''！上面的代码）' - 在'script'标记中包含'directives.js' – tymeJV

我试过了，但是当我分配了一个模块名称（ng-app =“moduleName”）时，我的控制器就中断了。那是我问是否需要改变控制器才能完成这项工作。 –

角度完成它的渲染后，您可以运行一个jQuery或任何其他JavaScript代码。有关详细信息，请参阅此答案：https://stackoverflow.com/a/20421291/2002079

来源

2014-02-17 12:06:40 ahmadalibaloch

当我们使用ng-repeat并需要触发jquery点击事件时，只需尝试此操作即可。

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

    //your code here... 

    });

来源

2016-02-25 11:34:43

jQuery不适用于ng-repeat结果

回答

相关问题