javascript - pagina - redireccionar angular 4

AngularJS ng-clic para ir a otra página(con marco iónico)

Question

Idealmente, cuando hago clic en el botón (que está en la barra de navegación Ionic en la parte superior), debería llevarme a otra página. Sin embargo, no funciona. Al hacer clic, los botones de la barra de navegación desaparecen.

Cuando usé códigos falsos, funciona; la alerta aparece. Pero cuando lo cambio al código actual, no funciona.

Tengo la sensación de que algunas cosas están mal con los códigos del controlador y cómo se hace referencia a la URL o la vista. Pero probar con href y ui-sref tampoco produce nada. Google Devt Tools (consola JS) y Batarang tampoco muestran nada.

¿Podría alguien mostrarme el camino, por favor?

código html ficticio

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

código de controlador ficticio en archivo js

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

código html real (probé las 4 versiones)

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

El archivo de controlador (las dependencias de publicación y autenticación funcionan bien). Cuando intento poner la URL tanto en .go () como en función (), la aplicación falla.

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

Extractos del archivo js del estado

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

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

Answer 1

En base a los comentarios, y debido al hecho de que @Thinkerer (el OP - póster original) creó un plunker para este caso, decidí agregar otra respuesta con más detalles.

• Aquí hay un plunker creado por @Thinkerer
• aquí está su versión actualizada y funcional

El primer e importante cambio:

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

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

porque la definición de estados es:

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

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

y necesitamos su url concatenada ''/tab'' + ''/posts'' . Esa es la url que queremos usar como una forma de lo contrario

El resto de la aplicación está muy cerca del resultado que necesitamos ...
Por ejemplo, todavía tenemos que colocar el contenido en la misma vista targetgogood, solo se cambiaron estos:

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

porque .state(''tab.newpost'' reemplazaría al .state(''tab.posts'' tenemos que colocarlo en el mismo anclaje:

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

Finalmente algunos ajustes en los controladores:

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

Como ya dije en mi respuesta anterior y comentarios ... el $state.go() es la única forma correcta de usar ionic o ui-router

Comprueba que todo tab.posts aquí. Nota final: hice correr solo la navegación entre tab.posts ... tab.newpost ... el resto sería similar

Answer 2

Si simplemente desea ir a otra página, entonces lo que podría necesitar es un enlace que se parece a un botón con un href como ese:

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

Espero que esto ayude.

Answer 3

Uno cree que debe cambiar es la llamada $state.go() . Como se describe aquí:

• $ state.go (a [, toParams] [, opciones])

El parámetro aprobado debe ser el nombre del estado

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

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

Algunos citan de doc (el primer parámetro de [$state.go(to /[, toParams/] /[, options/] ):

a

Cadena Absolute State Name o Relative State Path

El nombre del estado al que se hará la transición o una ruta de estado relativa. Si la ruta comienza con ^ o. entonces es relativo, de lo contrario es absoluto.

Algunos ejemplos:

$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.

Answer 4

Usar <a> con href en lugar de un <button> resuelve mi problema.

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

Answer 5

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>