2015-03-18 1 views
3

В следующих Документами онсэн это показывает, что функция setMainPage имеет дополнительное свойство, которое позволяет задать функцию обратного вызова:онсэн setMainPage обратного вызова не работает

http://onsen.io/reference/ons-sliding-menu.html#method-setMainPage

Это не похоже на работу, хотя, мой обратный вызов, похоже, не срабатывает. Нет ошибок или что-то, что он просто не запускает обратный вызов. Вот мой код:

<!doctype html> 
<html lang="en" ng-app="app"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="mobile-web-app-capable" content="yes"> 
    <title>My App</title> 

    <link rel="stylesheet" href="../lib/onsen/css/onsenui.css"> 
    <link rel="stylesheet" href="../styles/onsen-css-components-blue-basic-theme.css"> 
    <link rel="stylesheet" href="../styles/app.css"/> 

    <script src="../lib/onsen/js/angular/angular.js"></script> 
    <script src="../lib/onsen/js/onsenui.js"></script> 
    <script src="../../cordova.js"></script> 

    <script> 
    var module = angular.module('app', ['onsen']); 

    function show_hide() { 
     console.log("Fired");  
    } 
    </script> 

</head> 

<body>  

    <ons-navigator title="Navigator" var="myNavigator"> 
     <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" var="menu" type="reveal" max-slide-distance="400px" swipable="true"></ons-sliding-menu> 

     <ons-template id="menu.html"> 
      <ons-page modifier="menu-page"> 
       <ons-toolbar modifier="transparent"></ons-toolbar> 

       <ons-list class="menu-list"> 

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('english/about-this-guidance.html', { closeMenu: true, callback: show_hide() })"> 
         <ons-icon icon="fa-chevron-right"></ons-icon> 
         About this practice guidance 
        </ons-list-item> 

       </ons-list> 

      </ons-page> 
     </ons-template> 

     <ons-template id="page1.html"> 
      <ons-navigator title="Navigator" var="myNavigator"> 
       <ons-page> 
        <ons-toolbar> 
         <div class="center">Home</div> 
         <div class="right"> 
          <ons-toolbar-button ng-click="menu.toggle()"> 
           <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> 
          </ons-toolbar-button> 
         </div> 
        </ons-toolbar> 

        <ons-row> 
         <ons-col align="left"> 
          <h1>Home</h1> 
         </ons-col> 
        </ons-row> 
       </ons-page> 
      </ons-navigator> 
     </ons-template> 
    </ons-navigator> 
</body> 
</html> 

Интересно, если я делаю следующее:

<ons-list-item class="menu-item" ng-click="menu.setMainPage('english/about-this-guidance.html', { closeMenu: true, callback: 'show_hide()' })"> 

Тогда это будет ошибка, потому что я передаю строку, когда ее ожидающей функции, поэтому обратный вызов, похоже, зарегистрировать его просто не срабатывает

+0

Вы получаете сообщение об ошибке? Каким образом это не работает? –

+0

Нет ошибки, просто ничего не происходит – geoffs3310

+0

Я думаю, что это должно быть 'ng-click =" menu.setMainPage ('english/about-this-guid.html', {closeMenu: true, callback: show_hide()}) ', (одиночные кавычки) из функции обратного вызова –

ответ

5

Синтаксис верный, поэтому я думаю, что проблема, возможно, в ng-click. Попробуйте использовать функцию show_hide() внутри углового контроллера или вместо этого используйте onclick. In this Codepen example, первый элемент в меню использует ng-click, а второй - onclick, а консоль регистрирует только последний. Надеюсь, поможет!

+2

Вы также можете вызвать метод setMainPage внутри контроллера. –

+0

Есть способ вызвать функцию на prepush? Я использую навигатор и скользящее меню, но я не могу понять, почему мой console.log не уволен. Это мой пример Codepen http://codepen.io/anon/pen/zxgpVo В первый раз, когда вы входите в первую вкладку, все в порядке. Но если вы перейдете на вторую вкладку, ничего не произойдет, и если вы вернетесь на первую вкладку, ничего не произойдет снова. Я не знаю, почему! – fraymas

+1

Корень вашего проекта - это раздвижное меню, и вы добавляете события в дочерний навигатор на «ons.ready» (т. Е. Только в первый раз). Однако, насколько я понимаю, каждый раз, когда вы используете setMainPage(), дочерний навигатор уничтожается и создается новый, поэтому события, добавленные с помощью «ons.ready», теряются. Было бы лучше, если бы вы открыли новый вопрос для этого, чтобы другие люди могли проверить это и ответить. –

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