无法选中ng-repeat内元素：AngularJS动态元素绑定点击事件

嘿，我懂你遇到的麻烦了——用ng-repeat渲染出来的#filters子元素<a>，怎么都绑不上jQuery的点击事件对吧？核心原因是你的jQuery绑定代码执行时，这些动态生成的元素还没出现在DOM里，自然就绑定不上了。

下面给你两种解决方案，优先推荐第一种贴合AngularJS最佳实践的方式，尽量少用jQuery直接操作DOM：

方案一：用AngularJS的ng-click指令（推荐） #

在Angular项目里，尽量遵循框架的规则，用Angular自带的指令处理交互，这样能避免jQuery和Angular的DOM操作冲突，也更符合数据流逻辑。

第一步：修改HTML模板 #

把原来的jQuery点击事件换成ng-click，并把过滤逻辑绑定到控制器的方法上：

<ul id="filters" class="wow fadeInUp" data-wow-delay="0s">
    <li><a href="#" data-filter="*" class="selected" ng-click="filterProjects('*')">All Projects</a></li>
    <li ng-repeat="x in services">
        <a href="#" data-filter=".{{x.Id}}" ng-click="filterProjects('.' + x.Id)">{{x.Name}}</a>
    </li>
</ul>

第二步：在控制器中添加过滤方法 #

把原来的jQuery过滤逻辑移到Angular控制器里，同时处理Isotope的初始化和布局：

var app = angular.module("thainguyen", []);
app.controller("projects", function($scope, $http) {
    $scope.projects = [];
    $scope.services = [];
    // 先初始化Isotope
    var $container = jQuery('#gallery');
    $container.isotope({
        itemSelector: '.item',
        filter: '*'
    });

    // 加载服务数据
    $http.get("/Service/Get").then(function(response) {
        $scope.services = response.data;
        // 数据加载完后重新布局Isotope，防止元素错位
        $container.isotope('layout');
    });
    // 加载项目数据
    $http.get("/Projects/Get").then(function(response) {
        $scope.projects = response.data;
        $container.isotope('layout');
    });

    $(window).load(function() {
        $('#gallery').css('height', '');
    });

    // 新增过滤方法，处理点击事件
    $scope.filterProjects = function(selector) {
        // 更新选中状态
        jQuery('#filters a').removeClass('selected');
        jQuery('#filters a[data-filter="' + selector + '"]').addClass('selected');
        // 执行Isotope过滤
        $container.isotope({ filter: selector });
    };
});

这样改完，既能完美适配Angular的异步渲染，又能避免jQuery和Angular的DOM操作冲突，是最推荐的做法。

方案二：用jQuery事件委托（兼容现有代码） #

如果你不想大改现有代码，也可以用jQuery的事件委托机制——把事件绑定到已经存在的父元素#filters上，利用事件冒泡来捕获动态生成元素的点击事件。

修改你的jQuery事件绑定代码：

// 把原来的直接绑定改成委托绑定，监听父元素#filters下的a标签点击
jQuery('#filters').on("click", "a", function() {
    var $this = jQuery(this);
    if ($this.hasClass('selected')) {
        return false;
    }
    var $optionSet = $this.parents();
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');
    var selector = jQuery(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});

⚠️ 注意：要确保这段代码在#filters元素已经存在于DOM时执行，比如放在$(document).ready()里，或者Angular的$viewContentLoaded钩子中，避免父元素还没加载就绑定事件。

额外小提示 #

• 如果你选方案一，记得删掉原来独立的jQuery事件绑定代码，防止重复触发事件。
• 当Angular异步加载数据后，Isotope的布局可能会乱，所以在$http的回调里调用$container.isotope('layout')能帮你修复这个问题。

内容的提问来源于stack exchange，提问作者Hoan Thân