AngularJS OnsenUI在子頁面上的nav.popPage（）上重新加載父頁面

我正在調用ng-init上的函數，並在該頁面中按下按鈕，我將新頁面推向導航器的pageStack。在子頁面中，我彈出當前頁面。現在我想在頁面堆棧中刪除子頁面時重新加載父頁面。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'); 
    } 
});

更新

一個解決方案是使用

window.location.reload(true);

來源

2015-04-06 Danish Jamil

您可以使用自帶的new Onsen UI 1.3.0的new pageReplace()重新加載應用程序。你可以將它傳遞給popPage()這樣的回調：

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

在這裏工作：http://codepen.io/frankdiox/pen/gbJGZw

希望它能幫助！

來源

2015-04-07 02:45:35

這個我試過，但重裝功能沒有召回在replacePage 所以我用window.location.reload（真）重新加載整個應用程序; – 2015-04-08 09:14:16

檢查我提供的Codepen控制檯。每次按下'popPage'按鈕時都會出現一條新消息...因此正在調用重載功能。 – 2015-04-08 09:54:04

但是你的答案似乎是正確的。當我完成我的應用程序的設計後，會試試這個。 – 2015-04-09 05:20:23

Fran的答案很好，當頁面被替換時，UI中會出現一個小的閃爍/打嗝。通過使用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）並提交拉取請求。

來源

2015-04-16 02:44:06 danjarvis

這是一個好主意..只是已經做到了。 – 2015-04-16 06:04:56

嘿！像這樣的東西已經加入到Onsen UI 1.3.3-dev中：https://github.com/OnsenUI/OnsenUI/pull/663 現在用'popPage（{'refresh'：true}）就足夠了;'' 它將很快發佈:) – 2015-05-25 02:55:08

嗨@FranDios。我面臨着類似的問題。但是在popPage上使用'refresh'：true，不會重新加載控制器，所以我不能重新初始化那個頁面。還有其他出路嗎？ replacePage（）事件在UI中導致一個小故障。 – 2015-08-01 05:53:23

danjarvis，

謝謝你的想法！我正在與來自Ionic的溫泉苦苦掙扎，所以你的榜樣真的很有幫助。我稍微修改了一下，如果有人對此感興趣，我可以選擇這裏。它並不是爲我處理頁面頁面，我需要它來處理一些奇怪的重複指令問題。另外，有時我不得不返回多頁。

//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++; 
};

來源

2015-11-30 20:38:55 ohjeeez

AngularJS OnsenUI在子頁面上的nav.popPage（）上重新加載父頁面

回答

相關問題