Javascript jQuery无法处理ng重复结果

我正在使用ng repeat使用jQuery和TB构建一个手风琴。出于某种原因，当硬编码时，这是完美的工作方式，但在ng repeat指令内部时，单击时无法触发

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

我认为问题在于jQuery没有绑定在事件发生后加载的元素。因此，我认为与其在页面加载上加载脚本，不如在返回数据时在.success上加载函数。不幸的是，我不知道如何使这项工作

测试页面：

控制器：

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

            <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>

HTML：

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

            <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>

---

谢谢你的帮助

字面上的答案是因为这些处理程序是在运行时绑定的，因此

.panel heading

不存在。您需要活动委派

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

现在，由于您使用的是Angular，所有DOM操作都应该在一个指令中处理，而不是jQuery！您应该重复

ng click

处理程序或简单指令

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

---

在angular完成渲染后，可以运行jquery或任何其他javascript代码。有关详细信息，请参阅此答案：

当我们使用ng repeat并需要触发jquery click事件时，请尝试此方法，它对我有效

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

   //your code here...

  });

---

这是我一直在寻找的答案，尽管我是Angular的新手，不知道如何在代码中添加自定义指令。从我读到的所有内容来看，似乎我需要将所有内容移动到一个模块中，以便能够像这样添加指令？这是正确的吗？如果是，我是否需要更改控制器的编写方式，因为我看到它是在其他模块代码中完成的？我真的很想学习“正确”的方法来做这个角度。再次为我在这里缺乏经验感到抱歉。Thx.只需声明一个新文件，

directives.js

——在其中包含您的应用声明

var-app=angular.module（“您的应用程序”，[dependencies here]）

——然后使用指令

app.directive（以上代码）

--在

脚本中包含
directives.js

标记我尝试了这个方法，但当我分配了一个模块名（ng app=“moduleName”）时，我的控制器坏了。这就是我要问的，如果控制器需要改变才能工作。

link：（scope，elem，attrs）

需要是

link:function（scope，elem，attrs）

？太好了！这是一个快速的解决方案。