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

Using a toggle button inside side menu ionic framework

本文关键字：菜单 框架 侧面 按钮      更新时间：2023-09-26

我已经创建了一个sideMenu，其中的一个项目左边有一个文本，右边有一个复选框。菜单项链接到一个视图，该视图有一个项目列表。Toggle就像一个按钮，允许用户清除列表，而不必进入视图。

早先我给菜单项添加了'menu-close'属性，所以每次我点击这个开关，它就会改变值并关闭侧边菜单。

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

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

如何确保如果我点击toggle它会改变，当我点击item它会导航到view?

您应该能够将$event.stopPropagation()添加到外部单击事件，单击事件传播和冒泡，这就是为什么两者都在发射。

try this: 

<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>
固定:

所以你需要停止延长，你还需要把这个添加到CSS中使切换项可点击:

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

这里是一个离子游乐场来展示它的工作原理!http://play.ionic.io/app/d9920eee107d

您可以将toolgle放在一个普通的列表项中，以防止toolgle -item的行为。

<ion-item ng-click="show('click')">
    Item     
    <label class="toggle">
        <input type="checkbox" ng-model="state" ng-change="show(state)">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</ion-item>
相关文章：