Question

我正在使用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
});
}

非常感谢任何提示！

Answer 1

摆脱jQuery的使用。使用ngClick指令指定在元素单击时调用哪些函数，并将函数添加到当前范围（这是角度controller最适合的）来处理这些点击。

从评论中，角度最神奇的功能之一就是你不依赖于DOM来维护状态，而是将它全部存储在范围内。如果你想改变一些东西，你可以修改范围，让渲染/事件委托/等通过框架自行处理。

这是一个非常粗略的例子，我没有在浏览器中测试它，但它是典型的角度。

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();
}]);

Answer 2

您需要为DOM查询提供更多上下文，因为它们是动态创建的。您还应该在更高版本的jQuery中使用.on语法。 http://api.jquery.com/on/

$(document).on('click', '.nextButton', function () {
    //your code
});

如何强制jQuery识别动态创建的AngularJS元素？

2 个答案: