Estoy tratando de usar la ng-click función de AngularJS para cambiar de vista. ¿Cómo voy a hacer esto con el siguiente código?AngularJS: ¿Cómo cambio las vistas de una función de controlador?
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?
}
}
Para cambiar entre los diferentes puntos de vista, se puede cambiar directamente la window.location (utilizando el servicio de localización $!) En index.html presentar
<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, se utiliza ng-incluir con diferentes parciales y luego usar un interruptor-ng como se muestra aquí (https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html)
Tengo un ejemplo de trabajo.
Así es como se ve mi doc:
<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>
Esto es lo que mis miradas parciales como:
<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>
Esto es lo que se ve mi Ctrl como:
app.controller('Index', function($scope, $routeParams, $location){
$scope.auth = function(){
$location.url('/map');
};
});
aplicación es mi módulo:
var app = angular.module('app', ['ngResource']).config(function($routeProvider)...
Espero que sea útil!
La respuesta proporcionada es absolutamente correcto, pero yo quería expandirse por cualquier futuros visitantes que quieran hacerlo 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 como la respuesta aceptada, simplemente agregando algo de contenido dinámico para mejorar un poco. Si la respuesta aceptada quiere agregar esto, eliminaré mi respuesta.
un nitpick total, pero para su información, una "url" es en realidad la dirección web __full__, que incluye el protocolo (http: //) y todo. Tal como lo implica '$ location.path()', su variable se describe mejor como 'ruta'. –
@ZachL Se corrigió –
Pero requiere un $ rootScope. $ Digest(); o $ scope. $ apply(); para hacer que se mueva sin demora. – Raz
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 la hice funcionar estupendamente.
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 cuando yo estaba tratando de integrar un widget Kendo móvil de interfaz de usuario en un entorno angular que estaba perdiendo el contexto de mi controlador y el comportamiento de la etiqueta de anclaje regular también fueron secuestrados. Reestablecí mi contexto desde el widget de Kendo y necesitaba usar un método para navegar ... esto funcionó.
¡Gracias por las publicaciones anteriores!
El método utilizado para todas las respuestas anteriores a esta pregunta sugiere cambiar la URL que no es necesaria, y creo que los lectores deben conocer una solución alternativa. Uso ui-router y $ stateProvider para asociar un valor de estado con una plantillaUrl que apunta al archivo html para su vista. Entonces solo es cuestión de inyectar $ state en su controlador y llamar a $ state.go ('state-value') para actualizar su vista.
What is the difference between angular-route and angular-ui-router?
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');
Hope esto le ayudará a
Esta función poco 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;
}
};
Usted no necesita la ruta completa, sólo la vista que está cambiando
Hay dos formas de hacerlo:
Si está utilizando la interfaz de usuario-router o $stateProvider, lo hacen como:
$state.go('stateName'); //remember to add $state service in the controller
si está utilizando angular router o $routeProvider, lo hacen como:
$location.path('routeName'); //similarily include $location service in your controller
En lo que me molestó estaba usando el nombre de la ruta en lugar del nombre del estado ... es decir, debería ser "principal" en lugar de "/ principal" –
Recibo un error que dice que hash no es función de $ location. –
No veo que el hash sea parte del objeto $ location, pero hay una variable $$ hash, así es y, de ser así, no funciona. –
Bien, descubrí cómo hacerlo. $ location.path (ver); (http://docs.angularjs.org/guide/dev_guide.services.$location) –