javascript - kendo - Exponer el nombre de estado actual con el enrutador ui
dom javascript que es (6)
Estoy intentando implementar un selector de idioma en el que si un usuario hace clic en "de" desde una página determinada en un lado "en", los lleva a esa página del lado "de". Si console.dir el parámetro $ state, expone los valores que quisiera con la propiedad "actual" del $ estado dado. Si trato de consolar.dir the $ state.current para enfocarme en los valores que quiero, solo da la propiedad de estado principal (mis vistas actuales están anidadas).
Mi pensamiento actual es, estoy en url / en / content, y dinámicamente puedo hacer que mi navegación de idioma cargue dinámicamente los puntos de destino apropiados en algún tipo de atributo de datos, recogerlos con una directiva personalizada donde inicie una "ir a" y establecer mi valor de idioma preferido por traducción angular.
La cuestión clave en este momento es exponer ese $ nombre de estado; una vez más, al navegar $ declara que el objeto actual proporciona los valores que yo quisiera, pero $ current.state directamente solo proporciona el estado padre.
Si alguien tiene una mejor sugerencia de cómo hacerlo (de forma angular, sin basura de cookies personalizada), me complace tomar sugerencias.
¡Gracias!
¡Actualizar! MUESTRAS DE CÓDIGO:
Referencia de objeto de mis estados:
var urlStates = {
en: {
home: {
name: ''home'',
url: ''/en'',
templateUrl: ''templates/''+lang+''/home.html'',
abstract: ''true''
},
home_highlights: {
name:''home.highlights'',
url: '''',
templateUrl: ''templates/''+lang+''/home.highlights.html''
},
home_social:
{
name: ''home.social'',
url: ''/social'',
templateUrl: ''templates/''+lang+''/home.social.html''
},
home_map:
{
name: ''home.map'',
url: ''/map'',
templateUrl: ''templates/''+lang+''/home.map.html''
}
};
Mis estados:
$stateProvider
.state(urlStates.en.home)
.state(urlStates.en.home_highlights)
.state(urlStates.en.home_social)
.state(urlStates.en.home_map);
$locationProvider.html5Mode(true);
})
Controlador:
.controller(''LandingPage'', function($translate, $state){
this.state = $state;
this.greeting = "Hello";
});
Y, por último, la salida que veo en el dom:
Con this.state = $ state;
{
"params": {},
"current": {
"name": "home.highlights",
"url": "",
"templateUrl": "templates/en/home.highlights.html" },
"transition": null
}
Con this.state = $ state.current
{
"name": "",
"url": "^",
"views": null,
"abstract": true
}
En mi proyecto actual, la solución es la siguiente:
Creé un estado del lenguaje abstracto
$stateProvider.state(''language'', {
abstract: true,
url: ''/:language'',
template: ''<div ui-view class="lang-{{language}}"></div>''
});
Cada estado en el proyecto debe depender de este estado
$stateProvider.state(''language.dashboard'', {
url: ''/dashboard''
//....
});
Los botones de cambio de idioma llaman a una función personalizada:
<a ng-click="footer.setLanguage(''de'')">de</a>
Y la función correspondiente se ve así (dentro de un controlador por supuesto):
this.setLanguage = function(lang) {
FooterLog.log(''switch to language'', lang);
$state.go($state.current, { language: lang }, {
location: true,
reload: true,
inherit: true
}).then(function() {
FooterLog.log(''transition successfull'');
});
};
Esto funciona, pero hay una solución más agradable simplemente cambiando un valor en los parámetros de estado de html:
<a ui-sref="{ language: ''de'' }">de</a>
Lamentablemente, esto no funciona, consulte https://github.com/angular-ui/ui-router/issues/1031
Envolví $state around $timeout y funcionó para mí.
Por ejemplo,
(function() {
''use strict'';
angular
.module(''app'')
.controller(''BodyController'', BodyController);
BodyController.$inject = [''$state'', ''$timeout''];
/* @ngInject */
function BodyController($state, $timeout) {
$timeout(function(){
console.log($state.current);
});
}
})();
Es solo por el tiempo de carga que toma angular darle el estado actual.
Si intenta obtener el estado actual utilizando la función $timeout , obtendrá el resultado correcto en $state.current.name
$timeout(function(){
$rootScope.currState = $state.current.name;
})
Responder su pregunta en este formato es bastante desafiante.
Por otro lado, preguntas sobre la navegación y luego sobre el $state actual de $state actuando de forma extraña.
Para el primero diría que es una pregunta demasiado amplia y por el momento diría ... bueno, estás haciendo algo mal o te falta lo obvio :)
Tome el siguiente controlador:
app.controller(''MainCtrl'', function($scope, $state) {
$scope.state = $state;
});
Donde la app está configurada como:
app.config(function($stateProvider) {
$stateProvider
.state(''main'', {
url: ''/main'',
templateUrl: ''main.html'',
controller: ''MainCtrl''
})
.state(''main.thiscontent'', {
url: ''/thiscontent'',
templateUrl: ''this.html'',
controller: ''ThisCtrl''
})
.state(''main.thatcontent'', {
url: ''/thatcontent'',
templateUrl: ''that.html''
});
});
Entonces, la plantilla HTML simple tiene
<div>
{{ state | json }}
</div>
Se podría "imprimir", por ejemplo, la siguiente
{
"params": {},
"current": {
"url": "/thatcontent",
"templateUrl": "that.html",
"name": "main.thatcontent"
},
"transition": null
}
Puse un pequeño ejemplo que muestra esto, usando ui.router y pascalprecht.translate para los menús. Espero que lo encuentres útil y descubras qué es lo que estás haciendo mal.
Plunker aquí http://plnkr.co/edit/XIW4ZE
Tapa de la pantalla
Usar tiempo de espera
$timeout(function () { console.log($state.current, ''this is working fine''); }, 100);
así es como lo hago
JAVASCRIPT:
var module = angular.module(''yourModuleName'', [''ui.router'']);
module.run( [''$rootScope'', ''$state'', ''$stateParams'',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]);
HTML:
<pre id="uiRouterInfo">
$state = {{$state.current.name}}
$stateParams = {{$stateParams}}
$state full url = {{ $state.$current.url.source }}
</pre>
EJEMPLO