Question

我创建了一个带有ui-sref的离子列表，这样当点击一个项目时，它就会导航到一个特定的页面。我还在每个列表项的右上角放置了一个按钮，可以打开和关闭（有点像书签）。但是，当我单击按钮切换书签时，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

你在离子项中使用了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 eveent返回false。

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

1 - 添加ng-click on ion-item

<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;
}

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

1 个答案: