使用AngularJS和Onsen UI從控制器導航到新頁面
[英]Navigating to new page from controller using AngularJS and Onsen UI
問題描述
我有一個使用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']);
2 個解決方案
解決方案1
0 2016-05-25 09:40:08
您的代碼無法找到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);
解決方案2
0 2016-11-22 10:19:25
要從一個頁面導航到另一個頁面，可以使用以下代碼。
的HTML
<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
在控制器中
$rootScope.myNavigator.pushPage('page2.html');
溫泉用戶界面-刪除新頁面上的標簽欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.