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

Question

我有一个使用Onsen UI，Monaca和AngularJS开发的跨平台应用程序。

当用户单击视图上的按钮时，我试图从控制器导航到新页面。 我正在从这个帖子中寻求解决方案，但我不断收到错误消息： TypeError：无法读取Scope。$ scope.getDateAndPushPage中未定义的属性“ pushPage”

我已将视图设置为使用ng-repeat显示日期的列表视图，并且当用户单击任何列表视图项时，我都会获得选定的日期项，并在控制器中使用它来执行一些计算。 完成此操作后，我需要转到下一页以显示计算结果。

我的列表视图如下所示，并显示存储在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>

在我的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
    }
});

最后在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>

我已经尝试了上述SO帖子提供的所有解决方案，但似乎没有一个对我有用。 我的应用程序设置方式是将所有控制器拆分为各自的文件，以便于管理。 为此，我的主要app.js文件如下所示，我不确定这是问题的出处

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

Answer 1

您的代码无法找到myNavigator变量。 尝试更改：

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

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

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

Answer 2

要从一个页面导航到另一个页面，可以使用以下代码。

的HTML

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

在控制器中

$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