wake-up-neo.com

Verfügbarmachen des aktuellen Statusnamens mit dem ui-Router

Ich versuche, einen Sprachumschalter zu implementieren, bei dem ein Benutzer auf einer Seite "en" von einer beliebigen Seite auf "de" klickt - er führt sie zu dieser Seite der "de" -Seite. Wenn ich den $ state-Parameter in console.dir benutze, werden die gewünschten Werte mit der "aktuellen" Eigenschaft des angegebenen $ state angezeigt. Wenn ich versuche, die $ state.current-Datei von console.dir auf die gewünschten Werte zu fokussieren, wird nur die übergeordnete Statuseigenschaft angezeigt (meine aktuellen Ansichten sind verschachtelt).

Mein aktueller Gedanke ist, ich befinde mich auf url/en/content, und dynamisch kann ich dann die entsprechenden Zielpunkte durch meine lang-Navigation dynamisch in eine Art Datenattribut laden und diese mit einer benutzerdefinierten Anweisung abrufen, an der ich einen initiiere "Gehe zu" und setze meinen bevorzugten Sprachwert pro Winkelübersetzung.

Das Hauptproblem im Moment ist das Aufzeigen des $ state-Namens. Auch beim Durchsuchen des $ state gibt das aktuelle Objekt die gewünschten Werte an, während $ current.state direkt nur den übergeordneten Status angibt.

Wenn jemand einen besseren Vorschlag dazu hat (in kantiger Weise - kein benutzerdefinierter Keks-Dreck), nehme ich gerne Vorschläge entgegen.

Vielen Dank!

Aktualisieren! CODE-PROBEN:

Objektreferenz meiner Zustände:

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

        };

Meine Staaten:

$stateProvider
        .state(urlStates.en.home)
        .state(urlStates.en.home_highlights)
        .state(urlStates.en.home_social)
        .state(urlStates.en.home_map);

        $locationProvider.html5Mode(true);

})

Regler:

.controller('LandingPage', function($translate, $state){
    this.state = $state;
    this.greeting = "Hello";
});

Und zum Schluss die Ausgabe, die ich im Dom sehe:

Mit this.state = $ state;

{
    "params": {},
    "current": {
        "name": "home.highlights",
        "url": "",
        "templateUrl": "templates/en/home.highlights.html" },
        "transition": null
}

Mit this.state = $ state.current

{
    "name": "",
    "url": "^",
    "views": null,
    "abstract": true
}
44
motleydev

so mache ich es

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>

BEISPIEL 

http://plnkr.co/edit/LGMZnj?p=preview

76
rnrneverdies

Die Beantwortung Ihrer Frage in diesem Format ist ziemlich schwierig.

Auf der anderen Seite fragen Sie nach der Navigation und dann nach dem aktuellen $state, der alle seltsam wirkt.

Zum ersten würde ich sagen, es ist eine zu breite Frage und zum zweiten würde ich sagen ... nun, Sie machen etwas falsch oder verpassen das Offensichtliche :)

Nehmen Sie den folgenden Controller:

app.controller('MainCtrl', function($scope, $state) {
  $scope.state = $state;
});

Wo app konfiguriert ist als:

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'
    });
});

Dann einfache HTML-Vorlage haben 

<div>
  {{ state | json }}
</div>

Würde "ausdrucken", z. folgende

{ 
  "params": {}, 
  "current": { 
    "url": "/thatcontent", 
    "templateUrl": "that.html", 
    "name": "main.thatcontent" 
  }, 
  "transition": null
}

Ich habe ein kleines Beispiel gezeigt, das dies zeigt, wobei ui.router und pascalprecht.translate für die Menüs verwendet werden. Ich hoffe, Sie finden es nützlich und finden heraus, was Sie falsch machen.

Plunker hier http://plnkr.co/edit/XIW4ZE

Screencap


imgur

9
Mikko Viitala

In meinem aktuellen Projekt sieht die Lösung folgendermaßen aus:

Ich habe einen abstrakten Sprachzustand erstellt

$stateProvider.state('language', {
    abstract: true,
    url: '/:language',
    template: '<div ui-view class="lang-{{language}}"></div>'
});

Jeder Zustand im Projekt muss von diesem Zustand abhängen

$stateProvider.state('language.dashboard', {
    url: '/dashboard'
    //....
});

Die Schaltflächen zum Wechseln der Sprache rufen eine benutzerdefinierte Funktion auf:

<a ng-click="footer.setLanguage('de')">de</a>

Und die entsprechende Funktion sieht so aus (natürlich innerhalb eines Controllers):

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');
    });
};

Dies funktioniert, aber es gibt eine schönere Lösung, wenn Sie einen Wert in den Statusparametern von html ändern:

<a ui-sref="{ language: 'de' }">de</a>

Leider funktioniert das nicht, siehe https://github.com/angular-ui/ui-router/issues/1031

4
paul

Timeout verwenden

$timeout(function () { console.log($state.current, 'this is working fine'); }, 100);

Siehe - https://github.com/angular-ui/ui-router/issues/1627

3
AVI

Ich wickelte $state um $timeout und es funktionierte für mich.

Zum Beispiel,

(function() {
  'use strict';

  angular
    .module('app')
    .controller('BodyController', BodyController);

  BodyController.$inject = ['$state', '$timeout'];

  /* @ngInject */
  function BodyController($state, $timeout) {
    $timeout(function(){
      console.log($state.current);
    });

  }
})();
1
poke19962008

Es ist nur wegen der Lastzeit, die der Winkel benötigt, um Ihnen den aktuellen Zustand zu geben.

Wenn Sie versuchen, den aktuellen Status mithilfe der $timeout-Funktion abzurufen, erhalten Sie in $state.current.name ein korrektes Ergebnis.

$timeout(function(){
    $rootScope.currState = $state.current.name;
})
0
Gaurav Aggarwal