javascript - यूआई राउटर के साथ वर्तमान स्थिति का नाम उजागर करना

angularjs angular-ui-router (4)

इस प्रारूप में आपके प्रश्न का उत्तर देना काफी चुनौतीपूर्ण है।

दूसरी ओर आप नेविगेशन के बारे में पूछते हैं और फिर वर्तमान $state बारे में सभी अजीब अभिनय करते हैं।

पहले के लिए मैं कहूंगा कि यह बहुत व्यापक प्रश्न है और दूसरे के लिए मैं कहूंगा ... अच्छा, आप कुछ गलत कर रहे हैं या स्पष्ट याद कर रहे हैं :)

निम्नलिखित नियंत्रक लें:

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

स्क्रीन टोपी

मैं एक भाषा स्विचर को लागू करने की कोशिश कर रहा हूं, जहां अगर कोई उपयोगकर्ता "एन" पक्ष पर किसी भी पृष्ठ से "डी" पर क्लिक करता है - तो यह "डी" पक्ष के उस पृष्ठ पर ले जाता है। यदि मैं $ राज्य पैरामीटर को सांत्वना देता हूं, तो यह उन मानों को उजागर करता है, जो मुझे दिए गए $ राज्य की "वर्तमान" संपत्ति के साथ चाहिए। यदि मैं कंसोल पर $ स्थिति की कोशिश करता हूं। मैं जो मूल्य चाहता हूं, उस पर ध्यान केंद्रित करने के लिए। यह केवल मूल राज्य संपत्ति देता है (मेरे वर्तमान विचार नेस्टेड हैं)।

मेरी वर्तमान सोच है, मैं url / en / content पर हूं, और गतिशील रूप से मैं अपने लैंग नेविगेशन को गतिशील रूप से उपयुक्त गंतव्य बिंदुओं को किसी प्रकार की डेटा विशेषता में लोड कर सकता हूं, उन लोगों को एक कस्टम निर्देश के साथ चुन सकता हूं जहां मैं आरंभ करूंगा "जाने के लिए" और कोणीय-अनुवाद के अनुसार मेरा पसंदीदा मूल्य सेट करें।

फिलहाल मुख्य मुद्दा यह है कि $ राज्य का नाम - फिर से, जब केवल $ $ स्थिति को ब्राउज़ करने से वर्तमान वस्तु को वे मान मिलेंगे जो मैं चाहता हूँ, लेकिन $ current.state सीधे केवल मूल स्थिति देता है।

अगर किसी के पास यह करने का बेहतर सुझाव है (कोणीय तरीके से - कोई कस्टम कुकी जंक) तो मुझे सुझाव लेने में खुशी होगी।

धन्यवाद!

अद्यतन करें! कोड नमूने:

मेरे राज्यों का वस्तु संदर्भ:

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

और अंत में, मैं डोम में देख रहा हूँ:

इसके साथ। राज्य = $ राज्य;

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

इसके साथ .state = $ state.current

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

टाइमआउट का उपयोग करें

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

देखें - https://github.com/angular-ui/ui-router/issues/1627

मैंने लगभग $timeout आसपास $state लपेटा और इसने मेरे लिए काम किया।

उदाहरण के लिए,

(function() {
  'use strict';

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

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

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

  }
})();

यह मेरा इसे करने का तरीका है

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