如何在AngularJS的ui-router链接中添加点击事件？

嘿，我来给你分享几个在带ui-sref的锚点标签里触发点击事件的实用方案，都是日常开发里常用的：

方法一：直接使用ng-click（最简便） #

这是最直接的方式，你可以直接在锚点标签上添加ng-click指令，它会和ui-sref共存执行——AngularJS会先运行ng-click里的逻辑，再处理ui-sref的路由跳转。

修改后的代码示例：

<a ng-if="item.external!==true" 
   id="nav-drafts" 
   class="standard-menu-item comm-icon-news" 
   draggable="false" 
   ui-sref="root.drafts.index" 
   ui-sref-opts="{inherit: false}" 
   href="#/drafts"
   ng-click="onDraftsItemClicked($event)"> 
  <span class="icon sso-file"></span> 
  <span class="menu-item-label" ng-bind-html="item.label">Edits</span> 
</a>

然后在对应的控制器里定义点击处理函数：

$scope.onDraftsItemClicked = function($event) {
    // 这里写你的自定义点击逻辑，比如埋点统计、状态更新
    console.log('草稿箱菜单被点击了！');

    // 如果需要阻止默认的路由跳转（比如满足某些条件才允许跳转），可以添加这句
    // $event.preventDefault();
};

方法二：手动触发路由跳转（适合异步场景） #

如果你的点击逻辑需要执行异步操作（比如请求接口、校验权限），再决定是否跳转，那可以去掉ui-sref，改用$state.go()手动触发路由，这样能完全控制跳转时机。

修改后的代码示例：

<a ng-if="item.external!==true" 
   id="nav-drafts" 
   class="standard-menu-item comm-icon-news" 
   draggable="false" 
   href="#/drafts"
   ng-click="handleDraftsNavigation()"> 
  <span class="icon sso-file"></span> 
  <span class="menu-item-label" ng-bind-html="item.label">Edits</span> 
</a>

控制器里的处理函数：

// 记得注入$state服务
app.controller('YourController', function($scope, $state, someAsyncService) {
    $scope.handleDraftsNavigation = function() {
        // 先执行异步操作，比如权限校验
        someAsyncService.checkPermission().then(function(hasPermission) {
            if (hasPermission) {
                // 权限通过，手动跳转到目标状态
                $state.go('root.drafts.index', null, {inherit: false});
            } else {
                // 权限不足，提示用户并阻止跳转
                alert('你没有访问草稿箱的权限！');
            }
        });
    };
});

注意事项 #

• ng-click和ui-sref共存时，执行顺序是先ng-click，后路由跳转，除非你在ng-click里调用了$event.preventDefault()。
• 如果不需要异步控制，优先用方法一，代码更简洁；如果需要灵活控制跳转逻辑，选方法二。

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