Как я могу открыть свою кнопку с ионным боковым меню?

Недавно я попробовал создать ионное меню. У меня была проблема, когда, когда я провела основное тело, он открыл меню. Но я отключил функцию прокрутки, и теперь я не могу открыть меню. Я хочу, чтобы иметь возможность щелкнуть значок navicon, чтобы открыть меню, но не знаю, как это сделать.Как я могу открыть свою кнопку с ионным боковым меню?

Вот JavaScript:

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) { 


    $scope.toggleLeft = function() { 
    $ionicSideMenuDelegate.toggleLeft(); 
    };

Вот код заголовка, который содержит кнопки:

<body ng-app="todo" ng-controller="TodoCtrl"> 
    <ion-side-menus> 

    <!-- Center content --> 
    <ion-side-menu-content> 
    <ion-header-bar class="bar-dark"> 
    <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"> 
    </button> 
    <h1 class="title">{{activeProject.title}}</h1> 
    <!-- New Task button--> 
    <button class="button button-icon" ng-click="newTask()"> 
    <i class="icon ion-compose"></i> 
    </button> 
</ion-header-bar> 
<ion-content scroll="false"> 
<td-cards class="theLabel" id="card" ng-repeat="task in activeProject.tasks"> 
<td-card class="card-{{card.index}}"> 
<h4 style="text-align:center"> {{task.title}}</h4> 
</td-card> 
</td-cards>

Вот содержание меню:

<ion-side-menu side="left"> 

     <ion-pane ion-side-menu-content drag-content="false"> 
      <ion-header-bar class="bar-dark"> 
       <h1 class="title">Cards</h1> 
      </ion-header-bar> 
      <ion-content scroll="true"> 
      <edge-drag-threshold="true" drag-content="true"> 
      </ion-content> 
     </ion-pane> 

    </ion-side-menus>

источник

2014-11-04 Garrett

Можете ли вы создать CodePen, показывающий проблему? –

Ionic имеет удобную директиву menu-toggle, поэтому вы можете переключать меню на такой кнопке.

http://ionicframework.com/docs/api/directive/menuToggle/

<ion-header-bar class="bar-dark"> 
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
    </button> 
    <h1 class="title">{{activeProject.title}}</h1> 
    <!-- New Task button--> 
    <button class="button button-icon" ng-click="newTask()"> 
    <i class="icon ion-compose"></i> 
    </button> 
</ion-header-bar>

источник

2014-11-04 14:47:21

Это все еще не открывается ... мне нужно что-то изменить в Javascript или в коде содержимого меню? – Garrett

Без полного кода или демонстрации, чтобы показать проблему, ее трудно точно знать. Он должен работать, но что-то еще должно происходить, что не показано. –

Но что, если вы хотите открыть боковое меню, когда пользователь нажимает кнопку возврата оборудования? –

В index.html, замените menu-toggle="left" с ng-click="toggleProjects()" и в app.js добавить этот

$scope.toggleProjects = function() { 
    $ionicSideMenuDelegate.toggleLeft(); 
};

источник

2015-06-11 09:27:19

Вот что я делаю:

<ion-header-bar class="bar-dark"> 
    <button class="button button-icon" ng-click="toggleSideMenu()"> 
    <i class="icon ion-navicon"></i> 
    </button> 
    <h1 class="title">{{ activeProject.title }}</h1> 
</ion-header-bar>

В app.js, проверьте с $ionicSideMenuDelegate.isOpen()

$scope.toggleSideMenu = function() { 
    if ($ionicSideMenuDelegate.isOpen()) { 
    $ionicSideMenuDelegate.toggleLeft(false); // close 
    } else { 
    $ionicSideMenuDelegate.toggleLeft(); // open 
    } 
};

источник

2015-12-05 04:04:37 Sithu

Помог, мне нужно было проверить, было ли открыто боковое меню, потому что я хотел закрыть его при переключении на новую вкладку :) –

Как я могу открыть свою кнопку с ионным боковым меню?

ответ

Смежные вопросы