Question

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

当用户点击我视图上的按钮时，我试图从控制器导航到新页面。我正在关注来自THIS SO帖子的解决方案，但我一直收到错误： TypeError：无法读取Scope中未定义的属性'pushPage'。$ scope.getDateAndPushPage

我的视图设置为使用ng-repeat显示日期列表视图，当用户点击任何listview项目时，我会获得所选日期项目，并在我的控制器中使用它来执行一些计算。一旦完成，我需要转到下一页以显示计算。

我的列表视图如下所示，并显示数据中存储的日期列表：

<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中，我将导航器定义为：

<!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 个答案: