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

237

Estoy tratando de usar la función ng-click 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>

controller.js

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

javascript angularjs ngroute

— Al borde
fuente

314

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

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

Controller.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 )

— ganaraj
fuente

Recibo un error que dice que el hash no es función de $ location.

— The_Brink

No veo el hash como parte del objeto $ location, pero hay una variable $$ hash, por lo que es así y, de ser así, no funciona.

— The_Brink

OK, descubrí cómo hacerlo. $ location.path (ver); ( docs.angularjs.org/guide/dev_guide.services.$location )

— The_Brink

@The_Brink Gracias por la edición. No sé por qué fue rechazado. Hice cambios para reflejar lo que intentaba decir.

— ganaraj

2

Lo mejor que puedes hacer es hacer un enlace normal. <a href="https://stackoverflow.com/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

38

La respuesta proporcionada es absolutamente correcta, pero quería expandirme para cualquier visitante futuro que quiera hacerlo de manera 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 contenido dinámico para mejorar un poco. Si la respuesta aceptada quiere agregar esto, eliminaré mi respuesta.

— PW Kad
fuente

8

un punto crítico total, pero para su información, a urles en realidad la dirección web completa , incluido el protocolo (http: //) y todo. Como lo implica $location.path()su variable, se describe mejor como a path.

— Zach Lysobey

Pero requiere un $ rootScope. $ Digest (); o $ scope. $ apply (); para que se mueva sin demora.

— Raz

23

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

— Cody
fuente

12

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

¿Cuál es la diferencia entre angular-route y angular-ui-router?

— Gavin Palmer
fuente

5

Hay dos formas para esto:

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

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

si está utilizando un enrutador angular o $routeProviderhágalo como:

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

— Sukhminder Parmar
fuente

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

3

Sin hacer una renovación completa del entorno de enrutamiento predeterminado (# / ViewName), pude hacer una ligera modificación de la sugerencia de Cody y conseguí que funcionara de maravilla.

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 Kendo Mobile UI en un entorno angular, estaba perdiendo el contexto de mi controlador y el comportamiento de la etiqueta de anclaje normal también estaba siendo secuestrado. Restablecí mi contexto desde el widget de Kendo y necesitaba usar un método para navegar ... esto funcionó.

Gracias por las publicaciones anteriores!

— beauXjames
fuente

2

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á

— Vaishali Tekale
fuente

2

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

— Shawn Dotey
fuente