jQuery 不能处理 ng-repeat 结果答案

【问题标题】：jQuery not working with ng-repeat resultsjQuery 不能处理 ng-repeat 结果
【发布时间】：2013-12-09 22:18:16
【问题描述】：

我正在使用 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：

            <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-repeat 之外工作）

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

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

感谢您的帮助！

【问题讨论】：

标签： javascript jquery angularjs angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

字面意思是因为这些处理程序是在运行时绑定的，因此.panel-heading 不存在。您需要事件委托

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

现在，由于您使用的是 Angular，所有 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");
            });
        }
    }
});

【讨论】：

这是我一直在寻找的答案，尽管我是 Angular 新手，无法弄清楚如何在我的代码中添加自定义指令。从我读过的所有内容来看，似乎我需要将所有内容移动到一个模块中才能添加这样的指令？这个对吗？如果是，我是否需要更改控制器的编写方式，因为我看到它是在其他代码中使用模块完成的？我真的很想学习在 Angular 中执行此操作的“正确”方法。再次抱歉，我在这里缺乏经验。谢谢。
只需声明一个新文件，directives.js -- 在其中包含您的应用声明 var app = angular.module("your app", [dependencies here]) -- 然后使用指令app.directive(above code) -- 在您的script 标记中包含directives.js /跨度>
我试过了，但是当我分配了一个模块名称（ng-app="moduleName"）时，我的控制器就会中断。那就是我在问是否需要更改控制器才能使其正常工作。
link: (scope, elem, attrs) 必须是link: function(scope, elem, attrs)吗？

【解决方案2】：

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

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

   //your code here...

  });

【讨论】：

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

【解决方案3】：

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

【讨论】：