51

ユーザーが「en」側の特定のページから「de」をクリックすると、「de」側のそのページに移動する言語スイッチャーを実装しようとしています。$state パラメータを console.dir すると、指定された $state の「現在の」プロパティで必要な値が公開されます。必要な値に焦点を当てるために $state.current を console.dir しようとすると、親の状態プロパティのみが表示されます (現在のビューはネストされています)。

私の現在の考えでは、私は url/en/content を使用しており、動的に言語ナビゲーションに適切な目的地ポイントをある種のデータ属性に動的にロードさせることができます。 「移動」して、angular-translateごとにpreferedLanguage値を設定します。

現時点での重要な問題は、その $state 名を公開することです。繰り返しますが、単純に $state を参照すると、現在のオブジェクトが必要な値を提供しますが、 $current.state は親の状態のみを直接提供します。

誰かがこれを行う方法についてより良い提案をしている場合 (角度のある方法で - カスタム Cookie ジャンクではありません)、喜んで提案を受け付けます。

ありがとう！

アップデート！コードサンプル:

私の状態のオブジェクト参照:

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

        };

私の州:

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

        $locationProvider.html5Mode(true);

})

コントローラ：

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

最後に、dom に表示される出力:

this.state = $state; で

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

this.state = $state.current で

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

6 に答える 6

9

この形式で質問に答えるのは非常に困難です。

一方、あなたはナビゲーションについて尋ね、次に現在の$state行動についてすべて奇妙なことを尋ねます。

最初は広すぎる質問だと思います.2番目は...まあ、あなたは何か間違ったことをしている、または明らかなことを見逃しています:)

 

次のコントローラーを使用します。

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

は次appのように構成されています。

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

次に、単純な HTML テンプレート

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

たとえば、次のように「印刷」します

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

メニューにui.routerとを使用して、これを示す小さな例を示します。pascalprecht.translate役に立ち、何が間違っているのかを理解していただければ幸いです。

プランカーはこちらhttp://plnkr.co/edit/XIW4ZE

 

スクリーンキャプ

イムグル

于 2014-08-18T21:14:30.070 に答える
3

タイムアウトを使用

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

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

于 2016-10-05T19:08:19.810 に答える
1

$state私は周りを包み込み$timeout、それは私のために働いた.

例えば、

(function() {
  'use strict';

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

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

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

  }
})();
于 2016-07-15T16:52:48.080 に答える
0

現在の状態を取得するのにAngularがかかるロード時間のためです。

関数を使用して現在の状態を取得しようとすると、$timeout正しい結果が得られます$state.current.name

$timeout(function(){
    $rootScope.currState = $state.current.name;
})
于 2018-01-08T10:12:34.610 に答える