AngularJS中点击图标时禁止md-order-by执行的需求

点击图标时触发排序的原因是事件冒泡——点击事件会从图标所在的div向上传递到带有md-order-by属性的<th>元素，进而触发排序逻辑。只需在图标点击事件中阻止事件冒泡即可解决。

方法一：在HTML中直接阻止冒泡 #

修改图标所在div的ng-click指令，添加$event.stopPropagation()：

<th md-column md-order-by="test">
    Test 1<br/>
    <div ng-click="displayOtherColumn(); $event.stopPropagation()">
        <md-icon md-svg-icon="chevron-right" >
            <md-tooltip md-direction="bottom">
                See more
            </md-tooltip>
        </md-icon>
    </div>
</th>

方法二：在控制器方法中处理冒泡 #

如果希望逻辑更集中，可以在控制器的displayOtherColumn方法中接收$event参数并阻止冒泡：

控制器代码：

$scope.displayOtherColumn = function($event) {
    $event.stopPropagation();
    // 执行你的业务逻辑
};

HTML代码：

<th md-column md-order-by="test">
    Test 1<br/>
    <div ng-click="displayOtherColumn($event)">
        <md-icon md-svg-icon="chevron-right" >
            <md-tooltip md-direction="bottom">
                See more
            </md-tooltip>
        </md-icon>
    </div>
</th>

两种方法都能阻止点击事件传递到<th>元素，从而避免触发md-order-by的排序操作。

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