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

Wenn ich auf die Schaltfläche klicke (die sich oben in der Ionic-Navigationsleiste befindet), sollte ich idealerweise zu einer anderen Seite gelangen. Es funktioniert jedoch nicht. Beim Klicken verschwinden alle Schaltflächen der Navigationsleiste.

Wenn ich Dummy-Codes verwendet habe, funktioniert es; die Warnung erscheint. Aber wenn ich es in den eigentlichen Code tausche, funktioniert es nicht.

Ich habe das Gefühl, dass etwas mit den Controller-Codes und wie auf die URL oder Ansicht verwiesen wird, nicht stimmt. Aber auch das Testen mit href und ui-sref bringt nichts. Google Devt Tools (JS-Konsole) und Batarang zeigen ebenfalls nichts an.

Könnte mir bitte jemand den Weg zeigen?

Dummy-HTML-Code

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

Dummy-Controller-Code in der js-Datei

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

tatsächlicher HTML-Code (ich habe alle 4 Versionen ausprobiert)

<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="https://stackoverflow.com/tab/newpost"></button>
<button class="button button-icon ion-compose" ng-click="location.path("https://stackoverflow.com/tab/newpost")"></button>

Die Controller-Datei (die Post- und Auth-Abhängigkeiten funktionieren einwandfrei). Wenn ich versuche, die URL sowohl in .go() als auch in function() einzufügen, schlägt die App fehl.

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

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

Auszüge aus der State-js-Datei

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

$urlRouterProvider.otherwise('/auth/login');

Basierend auf Kommentaren und aufgrund der Tatsache, dass @Thinkerer (das OP – Originalplakat) Ich habe einen Plunker für diesen Fall erstellt und beschlossen, eine weitere Antwort mit weiteren Details anzuhängen.

• Hier ist ein Plunker, der von erstellt wurde @Denker
• hier ist es aktualisierte und funktionierende Version

Die erste und wichtige Änderung:

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

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

weil die Zustandsdefinition lautet:

.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 verkettete URL '/tab' + '/posts'. Das ist die URL, die wir als verwenden möchten Andernfalls

Der Rest der Anwendung kommt dem Ergebnis sehr nahe, das wir brauchen …
ZB müssen wir den Inhalt immer noch in dieselbe Ansicht targetgood platzieren, nur diese wurden geändert:

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

Weil .state('tab.newpost' wäre ersetzen das .state('tab.posts' wir müssen es im gleichen Anker platzieren:

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

Abschließend noch einige Anpassungen in den Controllern:

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

Wie ich bereits in meinen vorherigen Antworten und Kommentaren sagte … das $state.go() ist der einzig richtige Weg, wie man es benutzt ionic oder ui-router

Überprüfen Sie das alles hier
Letzte Anmerkung – Ich habe nur die Navigation zwischen ausgeführt tab.posts… tab.newpost… der Rest wäre ähnlich

Verwenden <a> mit href statt a <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>

Ein Gedanke, den Sie ändern sollten, ist der Anruf $state.go(). Wie hier beschrieben:

• $state.go(to [, toParams] [, options])

Der übergebene Parameter sollte der Zustandsname sein

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

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

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

zu

Zeichenfolge Absoluter Zustandsname oder relativer Zustandspfad

Der Name des Zustands, in den gewechselt wird, oder ein relativer Zustandspfad. Beginnt der Pfad 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.

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="https://stackoverflow.com/tab/newpost";
    };
});

HTML

<button class="button button-icon ion-compose" ng-click="createFixed()"></button>
<button class="button button-icon ion-compose" ng-click="createVariable("https://stackoverflow.com/tab/newpost")"></button>

Wenn Sie einfach zu einer anderen Seite wechseln möchten, benötigen Sie möglicherweise einen Link, der wie eine Schaltfläche mit einem href wie dem folgenden aussieht:

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

Hoffe das hilft.