AngularJS: ¿Cómo cambio las vistas desde una función de controlador?

Estoy tratando de usar el ng-clic función de AngularJS para cambiar de vista. ¿Cómo haría para hacer esto con el siguiente código?

index.html

 <div ng-controller="Cntrl">
        <div ng-click="someFunction()">
            click me
        <div>
    <div>

controlador.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }

preguntado el 12 de junio de 12 a las 20:06

8 Respuestas

Para cambiar entre diferentes vistas, puede cambiar directamente la ventana.ubicación (¡usando el servicio de $ubicación!) en el archivo index.html

<div ng-controller="Cntrl">
        <div ng-click="changeView('edit')">
            edit
        </div>
        <div ng-click="changeView('preview')">
            preview
        </div>
</div>

Controlador.js

function Cntrl ($scope,$location) {
        $scope.changeView = function(view){
            $location.path(view); // path not hash
        }
    }

y configure el enrutador para cambiar a diferentes parciales según la ubicación (como se muestra aquí https://github.com/angular/angular-seed/blob/master/app/app.js ). Esto tendría el beneficio de la historia, así como el uso de ng-view.

Alternativamente, usa ng-include con diferentes parciales y luego usa un ng-switch como se muestra aquí ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )

Respondido 29 Abr '15, 11:04

Recibo un error que dice que el hash no es una función de $ubicación. - Al borde

No veo que el hash sea parte del objeto $ubicación, pero hay una variable $$hash, así es y, de ser así, no funciona. - Al borde

Bien, descubrí cómo hacerlo. $ubicación.ruta(vista); (docs.angularjs.org/guide/dev_guide.services.$ubicación) - Al borde

@The_Brink Gracias por la edición. No sé por qué fue rechazado. Hice cambios para reflejar lo que estaba tratando de decir. - ganaraj

Lo mejor que puede hacer en realidad es simplemente hacer un enlace normal. <a href="/es/edit">Edit</a> Angular se asegurará de que el clic no cree una recarga de página. Este comportamiento se puede modificar para que active una recarga si se desea. - Anthony Martin

La respuesta proporcionada es absolutamente correcta, pero quería expandirme para futuros visitantes que quieran hacerlo de forma un poco más dinámica:

En la vista -

<div ng-repeat="person in persons">
    <div ng-click="changeView(person)">
        Go to edit
    <div>
<div>

En el controlador -

$scope.changeView = function(person){
    var earl = '/editperson/' + person.id;
    $location.path(earl);
}

El mismo concepto básico que la respuesta aceptada, solo agregando algo de contenido dinámico para mejorar un poco. Si la respuesta aceptada quiere agregar esto, eliminaré mi respuesta.

Respondido 28 ago 14, 03:08

un quisquilloso total, pero FYI, un url es en realidad el ser completados dirección web, incluido el protocolo (http://) y todo. Como implica $location.path() su variable se describe mejor como un path. - Zach Lysobey

Pero requiere $rootScope.$digest(); o $alcance.$aplicar(); para que se mueva sin demora. - Raz

Tengo un ejemplo funcionando.

Así es como se ve mi documento:

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
    <script src="js/app.js"></script>
    <script src="controllers/ctrls.js"></script>
</head>
<body ng-app="app">
    <div id="contnr">
        <ng-view></ng-view>
    </div>
</body>
</html>

Así es como se ve mi parcial:

<div id="welcome" ng-controller="Index">
    <b>Welcome! Please Login!</b>
    <form ng-submit="auth()">
        <input class="input login username" type="text" placeholder="username" /><br>
        <input class="input login password" type="password" placeholder="password" /><br>
        <input class="input login submit" type="submit" placeholder="login!" />
    </form>
</div>

Así es como se ve mi Ctrl:

app.controller('Index', function($scope, $routeParams, $location){
    $scope.auth = function(){
        $location.url('/map');
    };
});

la aplicación es mi módulo:

var app = angular.module('app', ['ngResource']).config(function($routeProvider)...

Espero que esto sea de ayuda!

Respondido 20 Jul 16, 20:07

El método utilizado para todas las respuestas anteriores a esta pregunta sugiere cambiar la URL, lo cual no es necesario, y creo que los lectores deben conocer una solución alternativa. Uso ui-router y $stateProvider para asociar un valor de estado con un templateUrl que apunta al archivo html para su vista. Entonces es solo cuestión de inyectar $state en su controlador y llamar a $state.go('state-value') para actualizar su vista.

¿Cuál es la diferencia entre la ruta angular y el enrutador angular-ui?

contestado el 23 de mayo de 17 a las 13:05

Hay dos maneras para esto:

Si está utilizando ui-router o $stateProvider, hazlo como:

$state.go('stateName'); //remember to add $state service in the controller

si está utilizando un enrutador angular o $routeProvider, hazlo como:

$location.path('routeName'); //similarily include $location service in your controller

contestado el 12 de mayo de 16 a las 05:05

Lo que me hizo tropezar fue usar el nombre de la ruta en lugar del nombre del estado... es decir, debería ser "main" en lugar de "/main" - ben schmidt

Sin hacer una renovación completa del entorno de enrutamiento predeterminado (#/ViewName), pude hacer una pequeña modificación de la sugerencia de Cody y funcionó muy bien.

el controlador

.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );

la vista

...
<li ng-click="general.goToView('Home')">HOME</li>
...

Lo que me llevó a esta solución fue que cuando intentaba integrar un widget de interfaz de usuario móvil de Kendo en un entorno angular, estaba perdiendo el contexto de mi controlador y el comportamiento de la etiqueta de anclaje regular también estaba siendo secuestrado. Restablecí mi contexto desde dentro del widget de Kendo y necesitaba usar un método para navegar... esto funcionó.

¡Gracias por las publicaciones anteriores!

Respondido 11 Abr '14, 20:04

Firstly you have to create state in app.js as below

.state('login', {
      url: '/',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })

and use below code in controller

 $location.path('login'); 

Espero que esto te ayudará

respondido 21 nov., 15:09

Esta pequeña función me ha servido bien:

    //goto view:
    //useage -  $scope.gotoView("your/path/here", boolean_open_in_new_window)
    $scope.gotoView = function (st_view, is_newWindow)
    {

        console.log('going to view: ' + '#/' + st_view, $window.location);
        if (is_newWindow)
        {
            $window.open($window.location.origin + $window.location.pathname + '' + '#/' + st_view, '_blank');
        }
        else
        {
            $window.location.hash = '#/' + st_view;
        }


    };

No necesita la ruta completa, solo la vista a la que está cambiando

Respondido el 12 de enero de 16 a las 20:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.