Навигация пользовательского интерфейса Onsen с параметрами

Я использую onsen ui с typescript и angularJS с ons-sliding-menu:

  <ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.html" side="left"
                     var="menu" type="reveal" max-slide-distance="260px" 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('link/to/some/page.html', {closeMenu: true})">
               Home
            </ons-list-item>
        <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
               Home
            </ons-list-item>
 </ons-list>
      </ons-page>
   </ons-template>

Это дает мне мое меню, и все в порядке.... Когда я перешел к link/to/some/page.html, мне нужно передать некоторые параметры в link/to/some /other/page.html с помощью этого кода:

 $scope.myNavigator.pushPage("link/to/some/other/page.html", {param1: "bla", param2: "blabla"});

Я прочитал параметры, используя этот код:

var page = $scope.myNavigator.getCurrentPage();
console.log(page.options.param1); // Should return "bla"

Это дает мне ошибку, потому что param1 не определен. Я не уверен, почему это происходит, потому что это код с onsenUI-страницы. Я думаю, это потому, что я уже определил страницу link/to/some/other/page.html в моем ons-sliding-menu....

Каждая страница выглядит так:

<ons-navigator title="Navigator" var="myNavigator">
   <div ng-controller="ControllerOfPage">
      <ons-page>
         <ons-toolbar>
            <div class="left">
               <ons-toolbar-button ng-click="menu.toggle()">
                  <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
               </ons-toolbar-button>
            </div>
            <div class="center">{{title}}</div>
         </ons-toolbar>
PAGE CONTENT
      </ons-page>
   </div>
</ons-navigator>

Какие-либо предложения? Спасибо!


angularjs onsen-ui
person publicDisplay    schedule 13.11.2014    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы говорите, что каждая страница похожа на ту, которую вы вставили. У вас есть несколько тегов <ons-navigator>? Вам действительно нужен только один.

Если вы сделаете

$scope.navigator.pushPage('somepage.html', {param1: 'bla'});

Вы должны быть в состоянии сделать

console.log($scope.navigator.getCurrentPage().options.param1);

См. перо:

http://codepen.io/argelius/pen/OPJRPe

У вас есть навигатор, прикрепленный к какой-то области, которая является родителем области действия контроллера для страницы, которую вы отправляете?

В вашем родительском контроллере вы можете сделать:

ons.ready(function() {
  $scope.navigator = $window.myNavigator
});

А затем используйте этот объект в дочерних контроллерах.

person Andreas Argelius    schedule 13.11.2014
comment
Привет, спасибо за ответ. В моем сценарии: где мне разместить элемент ons-navigator. Я просто помещаю начальный тег за ‹body› HTML-страницы, затем скользящее меню с полным меню и закрываю ons-navigator перед ‹/body›. Это кажется неправильным - person publicDisplay; 13.11.2014
comment
Кажется, что вы нажимаете страницу, в которой есть навигатор, и она имеет то же имя, поэтому вы перезаписываете глобальную переменную навигатора. Не могли бы вы показать код, в котором установлен $scope.myNavigator? Вы должны иметь возможность отправлять параметры с помощью pushPage(), поэтому я думаю, что это может быть не тот же навигатор, когда вы пытаетесь получить параметры. - person Andreas Argelius; 14.11.2014
comment
Я думаю, что есть проблема с ons.ready(function()..). Я использую машинописный текст и не нашел никаких определений машинописного текста для onsen ui - так что ons.ready(function() {$scope.navigator = $window.myNavigator}); говорит, что мне не удалось найти символы - person publicDisplay; 17.11.2014
comment
Ах, хорошо, навигатор загружается правильно, но теперь я получаю событие Fail to fire pageinit. Прикрепить элемент на странице к документу после инициализации. исключение. Это все еще из-за вещей ons.reads(...) - person publicDisplay; 17.11.2014
comment
Ах, проблема была в том, что я использовал link/to/some/page.html в качестве параметра для главной страницы в ons-sliding-menu, а также использовал его в качестве цели для ng-click=menu.setMainPage(...) - если я убрал ссылку с главной страницы, то все в порядке... Я не понимаю этого, но с этой модификацией работает.... - person publicDisplay; 17.11.2014
comment
Могу ли я узнать, что насчет параметра является переменной. например, var param = 'bla', а затем {param1: param} не работает. у вас есть идеи? - person fmchan; 07.01.2016

arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой, мое решение для этого в основном сочетает в себе что-то вроде этого

<ons-sliding-menu
        menu-page="menu.html"
        side="left"
        max-slide-distance="250px" 
        var="menu">
        <div class="main">
            <ons-navigator title="Navigator" var="myNavigator" page="home.html"></ons-navigator>
        </div>          
    </ons-sliding-menu>

Таким образом, вы можете использовать шаблон SlideMenu и Navigator.

person pedrofernandes    schedule 08.01.2016