11

jQueryとTBを使用してアコーディオンを構築するためにng-repeatを使用しています。何らかの理由で、これはハードコードされている場合は完全に機能しますが、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');
    }
});

助けてくれてありがとう！

4

3 に答える 3

21

文字通りの答えは、これらのハンドラーが実行時にバインドされているため、.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");
            });
        }
    }
});
于 2013-12-09T22:24:00.833 に答える
8

ng-repeat を使用していて、jquery クリック イベントをトリガーする必要がある場合は、これを試してみてください。

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

   //your code here...

  });
于 2016-02-25T11:34:43.330 に答える