Question

我创建了一个sideMenu，其中一个项目左侧有一个文本，右侧有一个切换（复选框）。菜单项链接到视图，该视图包含项目列表。切换就像一个按钮，允许用户清除列表，而不必进入视图。

早些时候，我已经关闭了菜单＆＃39;属性已添加到菜单项中，因此每次单击切换时，它都会更改值并关闭侧边菜单。

现在的问题是，在删除菜单关闭后＃39;我可以点击切换，菜单保持打开状态，但菜单项链接不起作用。我尝试过设置ng-click和href。如果我设置了href，即使我点击切换，该项目也会导航到新视图。

<ion-item class="item-toggle" ng-click="openNotifications()">
     <i class="icon ion-android-notifications-none"></i>
     Notifications
     <label class="toggle toggle-assertive">
        <input type="checkbox" ng-click="alert('notification on')">
          <div class="track">
              <div class="handle"></div>
          </div>
     </label>
</ion-item>

如何确保如果我点击切换它会发生变化，当我点击它导航到要查看的项目时？

Answer 1

您应该只能将$event.stopPropagation()添加到外部点击事件，点击事件传播和冒泡，这就是为什么两个都在解雇的原因。

试试这个：

<ion-item class="item-toggle" ng-click="openNotifications()">
     <i class="icon ion-android-notifications-none"></i>
     Notifications
     <label class="toggle toggle-assertive">
        <input type="checkbox" ng-click="alert('notification on');$event.stopPropagation()">
          <div class="track">
              <div class="handle"></div>
          </div>
     </label>
</ion-item>

固定IT：

因此您需要停止prorogation，您还需要将其添加到css以使切换项目可单击：

.item-toggle{
  pointer-events:initial !important;
}

这是一个离子操场，以显示它的工作！ http://play.ionic.io/app/d9920eee107d

使用侧面菜单离子框架内的切换按钮

1 个答案: