web-dev-qa-db-ja.com

UIルーターで現在の状態名を公開する

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

私の現在の考えは、私はurl/en/contentにあり、動的にlangナビゲーションに適切な目的地ポイントを何らかの種類のデータ属性に動的にロードさせ、カスタムディレクティブでそれらを開始することができます「移動」して、角度変換ごとにpreferedLanguage値を設定します。

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

誰かがこれを行う方法のより良い提案がある場合（angularの方法で-カスタム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
}
javascriptangularjsangular-ui-routerangular-translate
48
motleydev

これは私がそれをする方法です

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>

例

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

80
rnrneverdies

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

一方、あなたはナビゲーションについて尋ね、それから現在の$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

スクリーンキャップ

imgur
9
Mikko Viitala

私の現在のプロジェクトでは、ソリューションは次のようになります。

抽象的な言語状態を作成しました

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

プロジェクト内のすべての状態は、この状態に依存する必要があります

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

言語切り替えボタンは、カスタム関数を呼び出します。

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

そして、対応する関数は次のようになります（もちろんコントローラーの内部）：

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

これは機能しますが、状態パラメーターの値をhtmlから変更するだけでよい解決策があります。

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

残念ながら、これは動作しません。 https://github.com/angular-ui/ui-router/issues/1031

4
paul

タイムアウトを使用

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

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

3
AVI

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

  }
})();
1
poke19962008

その理由は、ロード時間のためにangularが現在の状態を取得するのにかかります。

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

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