Navigieren zu neuen Seite von Controller mit AngularJS und Onsen UI

Ich habe eine Cross-Plattform-App mit Onsen UI, Monaca und AngularJS entwickelt.Navigieren zu neuen Seite von Controller mit AngularJS und Onsen UI

Ich versuche, von einem Controller zu einer neuen Seite zu navigieren, wenn der Benutzer auf eine Schaltfläche in meiner Ansicht klickt. Ich verfolge eine Lösung von THIS SO posten, aber ich erhalte immer die Fehlermeldung: Typeerror:. Kann nicht Eigentum ‚pushPage‘ undefinierter bei Scope $ scope.getDateAndPushPage

Ich habe meine Ansicht einrichten, um ein lesbares Display Listenansicht von Daten mit ng-repeat und wenn der Benutzer auf einen der Listenansicht-Elemente klickt, erhalte ich das ausgewählte Datum und verwende es in meinem Controller, um einige Berechnungen durchzuführen. Sobald dies erledigt ist, muss ich zur nächsten Seite übergehen, um die Berechnungen anzuzeigen.

Meine Listenansicht sieht wie folgt aus und zeigt die Liste der Daten in Daten gespeichert:

<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 meinen Ansichten Controller ich versuche, und drücken Sie die neue Seite wie bei dem Beispiel, wie oben erwähnt pro mein Code unten:

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

Und schließlich in meiner index.html ich mein Navi haben wie folgt definiert:

<!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>

Ich habe alle Lösungen auf dem oben genannten SO-Post versucht, aber keiner scheint für mich zu arbeiten. Ich habe meine App so eingerichtet, dass alle Controller in separate Dateien aufgeteilt werden, um die Verwaltung zu vereinfachen. Zu diesem Zweck sieht meine Haupt app.js Datei wie folgt und Im nicht sicher ist, wo das Problem von

kommt

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

Quelle

2016-05-25 heyred

Ich glaube nicht, Sie separate Module für jeden Controller oder injizieren sie in Ihrer Anwendung erstellen müssen. Sie werden sie bereits als 'app.controller ('ctrlName', ...) 'initialisieren, um die App auf deren zu aufmerksam machen. Versuchen Sie auch, die App-Deklaration von 'var myApp = angular.module (" myApp ", ['onsen']));' zu ändern und Controller über dieser App zu erstellen. – seekers01

Danke für die Vorschläge, aber ich finde diese Art der Verwaltung meiner App am effizientesten, da alle Controller in einer Datei keine Option für mich sind. Die App wird sehr groß und ich musste die Dateien trennen, um sie besser zu verwalten. Auch der angebotene Vorschlag scheint meine Hauptfrage nicht zu beantworten. Navigieren zu einer neuen Seite von einem Controller entweder. – heyred

Ihr Code kann die myNavigator-Variable nicht finden. Versuchen Sie zu ändern: '' zu '' und verwenden Sie: '$ rootScope.ons. $ get ('# myNavigator '). pushPage (Seite); ' – seekers01

Ihr Code ist nicht in der Lage myNavigator Variable zu finden. Versuchen Sie,:

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

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

und Verwendung: $rootScope.ons.$get('#myNavigator').pushPage(page);

Quelle

2016-05-25 09:40:08 seekers01

So navigieren Sie zu von Seite zu einer anderen Seite, können Sie den folgenden Code verwenden.

HTML

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

In Controller

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

Quelle

2016-11-22 10:19:25 kbokdia

Navigieren zu neuen Seite von Controller mit AngularJS und Onsen UI

Antwort

Verwandte Themen