javascript - otro - varios controladores angularjs
AngularJS: ¿Cómo cambio las vistas desde una función de controlador? (8)
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?
}
}
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?
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
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
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.
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 )
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!
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!
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á