AngularJSとOnsen UIを使用してコントローラから新しいページに移動

Question

私は、Onsen UI、Monaca、AngularJSを使用して開発されたクロスプラットフォームアプリを持っています。

ユーザーが自分のビューのボタンをクリックすると、コントローラから新しいページに移動しようとしています。私はSO投稿THISから解決策を次のですが、私はエラーを得続ける：はTypeError：スコープで未定義のプロパティ「pushPage」を読み取ることができません$ scope.getDateAndPushPageを

は私が私の見解で表示するように設定しています。 ng-repeatを使用した日付のリストビューユーザーがリストビュー項目のいずれかをクリックすると、選択した日付項目が取得され、コントローラで使用して計算が実行されます。これが完了したら、計算を表示するために次のページに進む必要があります。

私のリストビューは、次のように見えるとデータに保存された日付のリストが表示されます。

私のビューコントローラで

<ul class="list"> 
    <li ng-repeat="myDate in data" class="list__item list__item--chevron" ng-click="getDateAndPushPage(myDate.date)")> 
     {{myDate.date}} 
    </li> 
</ul> 

私がしようとするごとに、上記の例のように新しいページをプッシュ以下の私のコード：

var dateReports = angular.module("dateReportsController", []); 
dateReports.controller("DateReportsController", function($scope, $http, $rootScope) 
{ 
    $scope.getDateAndPushPage = function (myDate) 
    {  
     var page = "date-report-details.html"; 
     console.log("Page: " + page); // OK here - outputs page: date-report-details.html 

     console.log("My Date: " + myDate); // OK here and do calculation 

     $rootScope.ons.myNavigator.pushPage(page); // Error here 
    } 
}); 

そして最後に私が持っている私のindex.htmlの中で、私のナビゲーターは、次のように定義される。

私は上記のSOの投稿で提供されているすべてのソリューションを試しましたが、どれも私のために働いているようです。私はすべてのコントローラが管理しやすくするために、別々のファイルに分割されるような方法でアプリケーションをセットアップしています。このために私のメインのapp.jsファイルがわからない、次のように見えるとイム問題があなたのコードはmyNavigator変数を見つけることができない

var app = angular.module("myApp", ['onsen', 'loginController', 'dateReportsController']); 

Answer 1

どこから来ているこれです。変更してみてください：<ons-navigator id="myNavigator" page="login.html"></ons-navigator>

および使用

<ons-navigator var="myNavigator" page="login.html"></ons-navigator> 

：$rootScope.ons.$get('#myNavigator').pushPage(page);

Answer 2

ページから別のページに移動するには、次のコードを使用することができます。コントローラ

$rootScope.myNavigator.pushPage('page2.html');