2015-04-06 5 views
4

Я вызываю функцию на ng-init, и на этой странице я нажимаю новую страницу на страницу «Навигатор» нажатием кнопки. И на дочерней странице я вывожу текущую страницу. Теперь я хочу перезагрузить родительскую страницу, когда дочерняя страница будет удалена из стека страниц.AngularJS OnsenUI перезагружает родительскую страницу на nav.popPage() на дочерней странице

Вот код:

HTML

<ons-navigator var="nav" page="page1.html"> 

</ons-navigator> 

<ons-template id="page1.html"> 
    <ons-page ng-controller="pageOneController" ng-init="reload()"> 
     <ons-toolbar> 
      <div class="center">Page 1</div> 
     </ons-toolbar> 
     <ons-button ng-click="nav.pushPage('page2.html')">Push Page</ons-button> 
    </ons-page> 
</ons-template> 

<ons-template id="page2.html"> 
    <ons-page> 
     <ons-toolbar> 
      <div class="center">Page 2</div> 
     </ons-toolbar> 
     <ons-button ng-click="nav.popPage();">Pop Page</ons-button> 
    </ons-page> 
</ons-template> 

AngularJS

module.controller('pageOneController', function(){ 
    $scope.reload = function(){ 
     console.log('Page one controller reloaded'); 
    } 
}); 

Update

одно решение перезагрузить приложение с помощью

window.location.reload(true); 

ответ

2

Вы можете использовать new pageReplace(), который поставляется с new Onsen UI 1.3.0. Вы можете передать его в функцию обратного вызов из popPage() как это:

$scope.popAndReplace = function() { 
    $scope.nav.popPage({onTransitionEnd : function() { 
    $scope.nav.replacePage('page1.html', { animation : 'none' }); 
    }}) 
}; 

Работы здесь: http://codepen.io/frankdiox/pen/gbJGZw

Надеется, что это помогает!

+0

Я попытался это, но функция перезагрузки не отозван replacePage Так я перезагрузки все приложение с помощью window.location.reload (истина); –

+0

Проверьте консоль в кодеде, которую я предоставил. Каждый раз, когда вы нажимаете кнопку «PopPage», появляется новое сообщение ... поэтому вызывается функция перезагрузки. –

+0

Однако ваш ответ кажется правильным. Попробуй это, когда я покончу с дизайном моего приложения. –

4

В то время как ответ Фрэн отлично работает, в пользовательском интерфейсе появляется небольшое мерцание/икота, когда страница заменяется. Я использовал несколько иной подход, используя insertPage() и изменяя порядок операций. Конечный результат является гладким потоком UI:

$scope.replacePreviousPage = function(url) { 
     var pages = $scope.nav.getPages(), 
      index = pages.length - 2; 

     if (index < 0) 
      return; 

     $scope.nav.insertPage(index, url); 
     pages.splice(index, 1); 
}; 

Вы можете создать еще одну функцию для инкапсулирования замены и хлопать, или просто позвонить им нравится:

$scope.replacePreviousPage('views/page1.html'); 
$scope.nav.popPage(); 

Я имею в виде заплат это в popPage() как (то есть option.reloadPage) и отправки запроса на вытягивание.

+0

Это отличная идея .. Просто сделай это .. –

+1

Эй! Что-то вроде этого было добавлено в Onsen UI 1.3.3-dev: https://github.com/OnsenUI/OnsenUI/pull/663 Теперь достаточно с 'popPage ({'refresh': true});' Он скоро будет выпущен :) –

+0

Привет @FranDios. Я столкнулся с подобной проблемой. Но используя «refresh»: true в popPage, не перезагружает контроллер, поэтому я не могу выполнить повторную инициализацию этой страницы. Есть ли другой выход? Функция replacePage() вызывает сбой в пользовательском интерфейсе. –

1

danjarvis,

Спасибо за идею! Я боролся с Onsen от Иона, поэтому ваш пример действительно помог. Я немного изменил его, и вот альтернатива, если кому-то это интересно. Это не уничтожало явные страницы для меня, и мне это было нужно для обработки некоторых нечетных дублирующих вопросов. Кроме того, мне приходилось иногда возвращать несколько страниц.

//function to go back and reload controller 
$rootScope.index = 0; 
$rootScope.replacePreviousPage = function (url) { 
    var c = 0; 
    angular.forEach(nav.getPages(), function (v, i) { 
     if (i >= $rootScope.index) { 
      nav.getPages()[i].destroy(); 
      c++; 
     } 
    }); 
    nav.insertPage($rootScope.index, url); 
    nav.popPage(); 
}; 

//back 
$rootScope.back = function (page) { 
    if (page === "index") { 
     location.reload(); 
    } else { 
     if (page === "version") { 
      $rootScope.index = $rootScope.index - 2; 
     } else { 
      $rootScope.index--; 
     } 
     $rootScope.replacePreviousPage('templates/' + page + '.html'); 
    } 
}; 

//forward 
$rootScope.forward = function (page) { 
    nav.pushPage('templates/' + page + '.html'); 
    $rootScope.index++; 
}; 
Смежные вопросы