使用AngularJS和Onsen UI从控制器导航到新页面

Question

I have a cross platform app developed using Onsen UI, Monaca and AngularJS. 我有一个使用Onsen UI，Monaca和AngularJS开发的跨平台应用程序。

I am trying to navigate to a new page from a controller when the user clicks a button on my view. 当用户单击视图上的按钮时，我试图从控制器导航到新页面。 I am following a solution from THIS SO post but I keep getting the error: TypeError: Cannot read property 'pushPage' of undefined at Scope.$scope.getDateAndPushPage 我正在从这个帖子中寻求解决方案，但我不断收到错误消息： TypeError：无法读取Scope。$ scope.getDateAndPushPage中未定义的属性“ pushPage”

I have my view set up to display a listview of dates using ng-repeat and when the user clicks on any of the listview items, I get the selected date item and and use it in my controller to perform some calculations. 我已将视图设置为使用ng-repeat显示日期的列表视图，并且当用户单击任何列表视图项时，我都会获得选定的日期项，并在控制器中使用它来执行一些计算。 Once this is done I need to segue to the next page to display the calculations. 完成此操作后，我需要转到下一页以显示计算结果。

My listview looks as follows and displays the list of dates stored in data : 我的列表视图如下所示，并显示存储在data中的日期列表：

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

In my views controller I try and push the new page as with the the example mentioned above as per my code below: 在我的views控制器中，按照下面的示例，按照上面的示例，尝试推送新页面：

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
    }
});

And finally in my index.html I have my navigator defined as: 最后在index.html中，将导航器定义为：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <!-- Usual content goes here - omitted because not relevant -->
</head>

<body>
    <!-- The first page in the navigation stack -->
    <ons-navigator var="myNavigator" page="login.html"></ons-navigator>
</body>
</html>

I have tried all the solutions offered on the above mentioned SO post but none seems to be working for me. 我已经尝试了上述SO帖子提供的所有解决方案，但似乎没有一个对我有用。 I have my app setup in such a way that all controllers are split into their separate files to make it easier to manage. 我的应用程序设置方式是将所有控制器拆分为各自的文件，以便于管理。 To this effect my main app.js file looks as follows and Im not sure is this where the issue is coming from 为此，我的主要app.js文件如下所示，我不确定这是问题的出处

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

Answer 1

your code is not able to find myNavigator variable. 您的代码无法找到myNavigator变量。 Try changing : 尝试更改：

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

to <ons-navigator id="myNavigator" page="login.html"></ons-navigator> 到<ons-navigator id="myNavigator" page="login.html"></ons-navigator>

and use: $rootScope.ons.$get('#myNavigator').pushPage(page); 并使用： $rootScope.ons.$get('#myNavigator').pushPage(page);

Answer 2

To navigate to from page to another page, you can use the following code. 要从一个页面导航到另一个页面，可以使用以下代码。

HTML 的HTML

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

In controller 在控制器中

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

使用AngularJS和Onsen UI从控制器导航到新页面

问题描述

2 个解决方案

解决方案1
0 2016-05-25 09:40:08

解决方案2
0 2016-11-22 10:19:25

使用AngularJS和Onsen UI从控制器导航到新页面

问题描述

2 个解决方案

解决方案1 0 2016-05-25 09:40:08

解决方案2 0 2016-11-22 10:19:25

解决方案1
0 2016-05-25 09:40:08

解决方案2
0 2016-11-22 10:19:25