1

AngularJSを使用して動的にページを作成しています。以前の静的バージョンのページで正常に機能していたタブ（jquery）クリックハンドラーがいくつかあります。

問題は、$（。prevButton）要素と$（。nextButton）要素がAngularJSによって作成され、明らかにJqueryがそれらを登録しないことです。ページが作成されたら、コンソールに次のコードを貼り付けることができ、すべて正常に機能します。

jqueryにDOMを「再スキャン」させて、動的に作成されたこれらすべての要素を登録するにはどうすればよいですか？または、この問題を回避するための別の手法はありますか？

$(document).ready(function () {
    $('.prevButton').click(function () {
    var r = $(this).attr('tabGroup');
    var e = ($('.nav-tabs[tabGroup=' + r + '] li.active').prev().find('a[data-toggle="tab"]'));
    if (e.length > 0) {
        e.click();
    }
    return false; //prevent the page from jumping around
});

$('.nextButton').click(function () {
    var r = $(this).attr('tabGroup');
    var f = ($('.nav-tabs[tabGroup=' + r + '] li.active').next().find('a[data-toggle="tab"]'));
    if (f.length > 0) {
        f.click();
    }
    return false; //prevent the page from jumping around
});
}

ヒントをありがとう！

4

2 に答える 2

2

jQueryの使用法を取り除きます。ngClickディレクティブを使用して、要素のクリック時に呼び出す関数を指定し、それらのクリックを処理するために現在のスコープに関数を追加します（これがAngularコントローラーに適しています）。

コメントから、Angularで最も驚くべき機能の1つは、状態を維持するためにDOMに依存せず、代わりにすべてをスコープに格納することです。何かを変更したい場合は、スコープを変更し、レンダリング/イベント委任などがフレームワークを介してそれ自体を処理するようにします。

これは非常に大まかな例であり、ブラウザでテストしたことはありませんが、Angularの典型的な例です。

HTML：

<div ng-controller="ExamplePagingController">
    <div class="previous" ng-click="previousPage()" ng-class="{ disabled: currentPage == 0 }"></div>
    <ul ng-repeat="(idx, page) in pagedItems" ng-show="idx == currentPage">
        <li ng-repeat="item in page">{{ item.someDisplayProperty }}</li>
    </ul>
    <div class="next" ng-click="nextPage()" ng-class="{ disabled: pagedItems.length == 0 || currentPage == pagedItems.length - 1 }"></div>
</div>

角張ったもの：

var exampleModule = angular.module('myAppName', []);

exampleModule .controller('ExamplePagingController', ['$scope', function ($scope) {
    $scope.items = someExternalVariableOrAngularServiceCall();
    $scope.currentPage = 0;
    $scope.pageSize = 5;
    $scope.pagedItems = [];

    $scope.groupToPages = function () {
        $scope.pagedItems = [];
        for (var i = 0; i < $scope.items.length; i += 1) {
            var pageIndex = Math.floor(i / $scope.pageSize);
            if (i % $scope.pageSize === 0) {
                $scope.pagedItems[pageIndex] = [$scope.items[i]];
            } else {
                $scope.pagedItems[pageIndex].push($scope.items[i]);
            }
        }
    };

    $scope.previousPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage -= 1;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pagedItems.length - 1) {
            $scope.currentPage += 1;
        }
    };

    $scope.groupToPages();
}]);
于 2013-03-22T21:46:15.527 に答える
0

DOMクエリは動的に作成されるため、より多くのコンテキストを与える必要があります。.onまた、jQueryの新しいバージョンでも構文を使用する必要があります。http://api.jquery.com/on/

$(document).on('click', '.nextButton', function () {
    //your code
});
于 2013-03-22T21:36:09.890 に答える