没有 ui-sref 列表项导航的列表项上的离子按钮

Question

我创建了一个带有 ui-sref 的 ionic 列表，以便在单击项目时导航到特定页面。我还在每个列表项的右上角放置了一个按钮，可以打开和关闭（有点像书签）。但是，当我单击按钮切换书签时，也会触发 ui-sref，从而导致不需要的页面导航。有没有办法隔离离子列表项中的按钮，以便在单击时不会触发列表项导航？

这是我的带有按钮的列表项代码：

<ion-item ng-class="{'save': item.save}" collection-repeat="item in items" ui-sref="tab.page({id:item.$id})">
  <button class="icon button top-right" ng-click="item.save = !item.save" ng-class="{'ion-ios-heart button-clear button-assertive':item.save, 'ion-ios-heart-outline  button-clear button-stable':!item.save}"></button>
</ion-item>

Answer 1

您在 ion-item 中使用了 ui-sref 指令，将其作为链接（例如 <a> 标签），然后在两者之间添加按钮，所以当然，当您单击按钮时，它会做页面导航。

您需要在外部定义您的按钮。

<ion-item ng-class="{'save': item.save}" collection-repeat="item in items" ui-sref="tab.page({id:item.$id})">      
</ion-item>

<button class="icon button top-right" ng-click="item.save = !item.save" ng-class="{'ion-ios-heart button-clear button-assertive':item.save, 'ion-ios-heart-outline  button-clear button-stable':!item.save}"></button>

更新： 基本上，当您在链接标签中有按钮时，在链接触发后首先调用按钮。因此，如果单击按钮，您需要做的是以某种方式为您的 ui-sref 事件返回 false。

由于您使用的是 angularjs，因此您可以这样做（我没有测试它，但它应该可以工作，让我知道这是否有效）：

1 - 在你的 ion-item 上添加 ng-click

<ion-item ng-click="isNavigation()" ng-class="{'save': item.save}" collection-repeat="item in items" ui-sref="tab.page({id:item.$id})">      

2 - 更改您的按钮 ng-click 以使用功能

<button class="icon button top-right" ng-click="myFunctionName(item.save)" ng-class="{'ion-ios-heart button-clear button-assertive':item.save, 'ion-ios-heart-outline  button-clear button-stable':!item.save}"></button>

3 - 在你的控制器中：

$rootScope.isNavigation=true;
$scope.isNavigation=function(){
    if($rootScope.isNavigation)
         return true;
    else
        return false;
}
$scope.myFunctionName(item){
  $rootScope.isNavigation=false;
  return item.save = !item.save;
}