AngularJS如何为所有表格<td>绑定点击事件（替代ng-click）

没问题，我来帮你搞定这个需求！要不用ng-click，而是通过angular.element手动绑定点击事件来实现单元格内容选中，咱们可以分几种场景来处理，确保覆盖静态和动态表格的情况：

1. 静态表格（DOM固定）的实现方式 #

如果你的表格内容是固定的，不会动态加载，那可以在控制器里借助$timeout来等待DOM渲染完成后绑定事件：

angular.module('yourApp').controller('TableController', function($scope, $timeout) {
    // 等待Angular完成DOM渲染后再绑定事件
    $timeout(function() {
        // 选中页面上所有<td>元素，绑定点击事件
        angular.element('td').on('click', function(event) {
            // 将点击事件对象传递给处理函数
            $scope.onTdClick(event);
        });
    });

    // 你的点击处理逻辑，和ng-click的效果完全一致
    $scope.onTdClick = function(ev) {
        window.getSelection().selectAllChildren(ev.target);
    };
});

为什么要用$timeout？因为AngularJS的消化周期（digest cycle）结束后才会把数据渲染到DOM上，$timeout会把绑定逻辑放到下一个周期执行，确保此时<td>已经存在于页面中，能被正确选中。

2. 动态表格（含ng-repeat）的事件委托方案 #

如果表格是用ng-repeat动态生成的，或者后续会新增单元格，上面的直接绑定方式会漏掉新生成的<td>。这时候事件委托就派上用场了——把事件绑定到父元素（比如<table>），利用事件冒泡来触发：

angular.module('yourApp').controller('DynamicTableController', function($scope, $timeout) {
    $timeout(function() {
        // 绑定到table元素，监听子元素td的点击事件
        angular.element('table').on('click', 'td', function(event) {
            $scope.onTdClick(event);
        });
    });

    $scope.onTdClick = function(ev) {
        window.getSelection().selectAllChildren(ev.target);
    };

    // 示例：动态添加行的逻辑
    $scope.addRow = function() {
        $scope.rows.push({name: '新行', value: '新值'});
    };
});

这种方式不管后续新增多少<td>，点击事件都会生效，因为事件是绑定在父元素上的，会自动捕获子元素的冒泡事件。

3. 更优雅的指令封装（推荐） #

如果这个功能要在多个表格里复用，最好封装成一个自定义指令，这样更模块化，也不会污染全局的DOM选择：

angular.module('yourApp').directive('tdSelectOnClick', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            // 只绑定当前指令所在元素下的<td>
            element.find('td').on('click', function(event) {
                window.getSelection().selectAllChildren(event.target);
                // 如果需要触发Angular的消化周期，可以调用scope.$apply()
                // 这里只是选中内容，不需要修改scope，所以可以省略
            });
        }
    };
});

然后在HTML里直接用这个指令：

<table td-select-on-click>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
    <!-- 动态生成的行也会生效 -->
    <tr ng-repeat="row in rows">
        <td>{{row.name}}</td>
        <td>{{row.value}}</td>
    </tr>
</table>

这种方式既干净又复用性强，是AngularJS里推荐的组件化写法。

内容的提问来源于stack exchange，提问作者Ma Dude