AngularJS ng-click um zu einer anderen Seite zu gelangen (mit Ionic Framework)

Ideal, wenn ich auf den button (das ist in den Ionischen navbar oben), dann sollte es bringen mich zu einer anderen Seite. Aber es funktioniert nicht. Klicken Sie auf die nav bar buttons alles verschwindet.

Wenn ich dummy-codes, es funktioniert, wird die Warnung angezeigt.
Aber wenn ich tausche es um den eigentlichen code, es funktioniert nicht.

Ich habe das Gefühl, somethings falsch mit der controller-codes und wie die URL oder Sicht bezeichnet. Aber die Tests mit href und ui-sref auch beim Ertrag etwas. Google Devt-Tools (JS-Konsole) und Batarang zeigt auch nichts.

Könnte jemand mir den Weg zeigen bitte?

dummy-html-code

<button class="button button-icon ion-compose" ng-click="create()"></button>

dummy-controller-code in js Datei

$scope.create = function() {
  alert("working");
};

eigentliche html-code (ich habe versucht, alle 4 Versionen)

<button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button>
<button class="button button-icon ion-compose" ui-sref="tab.newpost"></button>
<button class="button button-icon ion-compose" href="/tab/newpost"></button>
<button class="button button-icon ion-compose" ng-click="location.path('/tab/newpost')"></button>

Die controller-Datei (das Post-und Auth-Abhängigkeiten arbeiten ok). Wenn ich versuche die URL in beiden die .gehen Sie() und die Funktion(), die app nicht.

app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.create = function() {
      /* $location.path('/tab/newpost'); */   /* this variant doesnt work */
      $state.go("/tab/newpost"); 
    };
  });

Auszüge des Staates js-Datei

.state('tab.newpost', {
      url: '/newpost',
      views: {
        'tab-newpost':{
          templateUrl: 'templates/tab-newpost.html',
          controller: 'NewCtrl'
        }
      }
    });

$urlRouterProvider.otherwise('/auth/login');
Kommentar zu dem Problem
Sind Sie versuchen, laden Sie das ganze Seite? Oder navigieren Sie einfach auf die Registerkarte? Kommentarautor: manosim
Die app verfügt über eine Navigationsleiste am oberen und einer unteren Leiste. Die untere Leiste wird vertreten durch den Zustand "Registerkarte". Auf auf, es soll navigieren Sie zu der neuen Seite, während die navbar und die Bodenplatte bleibt. Kommentarautor: Thinkerer
Wenn Sie uns eine codepen link, dann wird es einfacher dir zu helfen. Kommentarautor: manosim
Nur um sicher zu sein, haben Sie überprüfen Sie meine Antwort? dein Problem kommt von den ui-router, die Teil von ionic framework. Der $Staat.gehen müssen ordnungsgemäß aufgerufen werden - mit einem Stand der name, nicht die url... hoffe das hilft ein wenig 😉 Kommentarautor: Radim Köhler
@RadimKöhler ich habe versucht, die $Staat.gehen und $Fenster-Methode und beide hatten einen Nicht BEKOMMEN kann /tab/newpost Fehler (wenn die html-Datei hat eine ng-click=create() anstatt ng-Taste("tab.newpost"), die ich Schätze, bedeutet seine etwas arbeiten. Bei Verwendung von $Status.gehen, ich bin mir nicht sicher wie sonst zu machen, damit es funktioniert. Codepen funktioniert schlecht hier, wie ich haben verschiedene codes, die im Zusammenhang mit der Datenbank und andere Produkte, wo kann ich nicht einfügen. Kommentarautor: Thinkerer

InformationsquelleAutor der Frage Thinkerer | 2014-08-23

  1. 35

    Basierend auf Kommentare, und aufgrund der Tatsache, dass @Thinkerer (die OP - original poster) erstellt eine plunker für diesen Fall habe ich beschlossen, das Anhängen einer weiteren Antwort mit mehr details.

    Die erste und wichtigste Veränderung:

    //instead of this
$urlRouterProvider.otherwise('/tab/post');

//we have to use this
$urlRouterProvider.otherwise('/tab/posts');

    weil die Bundesländer definition:

    .state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: 'tabs.html'
})

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    }
  }
})

    , und wir brauchen Ihre verkettet url '/tab' + '/posts'. Das ist die url, die wir verwenden wollen, als sonst

    Den rest der Anwendung ist wirklich nah an das Ergebnis, das wir brauchen,...

    E. g. wir stil haben, um den Inhalt in die gleiche Ansicht targetgood, nur diese verändert wurden:

    .state('tab.newpost', {
  url: '/newpost',
  views: {
    //'tab-newpost': {
    'tab-posts': {
      templateUrl: 'tab-newpost.html',
      controller: 'NavCtrl'
    }
  }

    weil .state('tab.newpost' wäre ersetzen die .state('tab.posts' wir haben, um es zu platzieren in den gleichen Anker:

    <ion-nav-view name="tab-posts"></ion-nav-view>

    Schließlich einige Anpassungen im Controller:

    $scope.create = function() {
    $state.go('tab.newpost');
};
$scope.close = function() { 
     $state.go('tab.posts'); 
};

    Wie ich schon sagte in meiner vorherigen Antwort und Kommentare ... die $state.go() ist der einzig richtige Weg, wie zu verwenden ionic oder ui-router

    Überprüfen Sie, dass alle hier
    Letzter Hinweis - ich habe zu laufen, nur die navigation zwischen tab.posts... tab.newpost... der rest würde ähnlich

    InformationsquelleAutor der Antwort Radim Köhler

  2. 14

    Verwenden <a> mit href-statt einer <button> löst mein problem. 

    <ion-nav-buttons side="secondary">
  <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a>
</ion-nav-buttons>

    InformationsquelleAutor der Antwort Yang Zhang

  3. 8

    Einer denke, Sie sollten den Aufruf $state.go(). Wie hier beschrieben:

    Param übergeben werden sollte, der name des Landes

    $scope.create = function() {
  //instead of this
  //$state.go("/tab/newpost"); 

  //we should use this
  $state.go("tab.newpost"); 
};

    Einige zitieren von doc (der erste parameter zu der [$state.go(to \[, toParams\] \[, options\]):

    String Absolute Staat Namen oder Relativen Zustand Pfad

    Den Namen des Staates, übergegangen wird, oder einen relativen Zustand Pfad. Wenn der Pfad beginnt mit ^ oder . dann ist es relativ, sonst ist es absolut.

    Einige Beispiele:

    $state.go('contact.detail') will go to the 'contact.detail' state
$state.go('^') will go to a parent state.
$state.go('^.sibling') will go to a sibling state.
$state.go('.child.grandchild') will go to a grandchild state.

    InformationsquelleAutor der Antwort Radim Köhler

  4. 3
    app.controller('NavCtrl', function ($scope, $location, $state, $window, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.createVariable = function(url) {
      $window.location.href = url;
    };
    $scope.createFixed = function() {
      $window.location.href = '/tab/newpost';
    };
});

    HTML

    <button class="button button-icon ion-compose" ng-click="createFixed()"></button>
<button class="button button-icon ion-compose" ng-click="createVariable('/tab/newpost')"></button>

    InformationsquelleAutor der Antwort Giannis Paraskevopoulos

  5. 3

    Wenn Sie wollen einfach wechseln zu einer anderen Seite, dann, was Sie vielleicht brauchen, ist ein link, der aussieht wie ein Knopf mit einem href-wie so:

    <a href="/#/somepage.html" class="button">Back to Listings</a>

    Hoffe, das hilft.

    InformationsquelleAutor der Antwort Kingsley Ijomah

Schreibe einen Kommentar