1

我正在使用 AngularJS 来动态创建一个页面。我有一些 Tab (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 最令人惊奇的特性之一是您不依赖 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 回答