javascript - otro - varios controladores angularjs

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

Question

Estoy tratando de usar la función ng-click de AngularJS para cambiar de vista. ¿Cómo voy a hacer esto con el código de abajo?

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

Answer 1

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 estar al tanto de una solución alternativa. Utilizo ui-router y $ stateProvider para asociar un valor de estado con templateUrl que apunta al archivo html para su vista. Entonces es solo cuestión de inyectar el $ state en su controlador y llamar a $ state.go (''valor-estado'') para actualizar su vista.

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

Answer 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

Answer 3

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 angular-router o $routeProvider , hágalo como:

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

Answer 4

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

Answer 5

Para cambiar entre diferentes vistas, puede cambiar directamente la ubicación de window (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 parciales diferentes 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 )

Answer 6

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 la interfaz de usuario de Kendo Mobile 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. Reestablecí mi contexto desde el widget de Kendo y necesitaba usar un método para navegar ... esto funcionó.

Gracias por las publicaciones anteriores!

Answer 7

Tengo un ejemplo trabajando.

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>

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!

Answer 8

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á