कंट्रोलर में यूआई-राउटर में यूआई-एसएफआर का उपयोग करके पैरामीटर कैसे पास करें

Question

मुझे उस राज्य में दो मापदंडों को पारित करने और प्राप्त करने की आवश्यकता है जिसे मैं ui-srefयूआई-राउटर के उपयोग से पार करना चाहता हूं ।

राज्य को और मापदंडों के homeसाथ बदलने के लिए नीचे दिए गए लिंक का उपयोग करने जैसा कुछ :foobar

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>

नियंत्रक में मूल्य प्राप्त करना fooऔर bar:

app.controller('SomeController', function($scope, $stateParam) {
  //..
  var foo = $stateParam.foo; //getting fooVal
  var bar = $stateParam.bar; //getting barVal
  //..
});     

मैं undefinedके लिए $stateParamनियंत्रक में।

क्या कोई मुझे यह समझने में मदद कर सकता है कि इसे कैसे पूरा किया जाए?

संपादित करें:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },

    'A@home': {
      templateUrl: 'a.html',
      controller: 'MainCtrl'
    },

    'B@home': {
      templateUrl: 'b.html',
      controller: 'SomeController'
    }
  }

});

Comments

आपको उन्हें अपने मार्गों में भी स्थापित करना होगा। ex: - url:'.../home/:foo/:bar

— PSL

@PSL: क्या आप यहाँ एक छोटा सा उदाहरण दे सकते हैं? धन्यवाद।

— स्किप करें

@ पीएसएल: धन्यवाद पीएसएल, क्या कोई अन्य तरीका है जो एक नियंत्रक में उनके मान के साथ उन मापदंडों को हो सकता है?

— स्किप करें

क्या '/:foo/:bar': {अपने खाली मार्ग में या आप के रूप में अच्छी querystring के रूप में स्थापित कर सकते हैं।

— PSL

Answer 1

मैंने एक उदाहरण बनाया है कि कैसे दिखाया जाए। अद्यतन stateपरिभाषा होगी:

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'

        },
        ...
      }

और यह नियंत्रक होगा:

.controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
    $scope.state = $state.current
    $scope.params = $stateParams; 
})

हम देख सकते हैं कि राज्य घर अब url के रूप में परिभाषित किया गया है:

url: '/:foo?bar',

जिसका अर्थ है, कि url में params के रूप में अपेक्षित हैं

/fooVal?bar=barValue

ये दो लिंक सही तरीके से कंट्रोलर में तर्क देंगे:

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">

इसके अलावा, नियंत्रक इसके $stateParamsबजाय उपभोग करता है $stateParam।

डॉक्टर से लिंक करें:

• URL पैरामीटर

आप इसे यहाँ देख सकते हैं

params : {}

वहाँ भी है नया , और अधिक व्यापक सेटिंग params : {}। जैसा कि हमने पहले ही देखा है, हम मापदंडों को घोषित कर सकते हैं url। लेकिन params : {}कॉन्फ़िगरेशन के साथ - हम इस परिभाषा का विस्तार कर सकते हैं या यहां तक ​​कि पैरामीटर्स भी पेश कर सकते हैं जो यूआरएल का हिस्सा नहीं हैं:

.state('other', {
    url: '/other/:foo?bar',
    params: { 
        // here we define default value for foo
        // we also set squash to false, to force injecting
        // even the default value into url
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        // this parameter is now array
        // we can pass more items, and expect them as []
        bar : { 
          array : true,
        },
        // this param is not part of url
        // it could be passed with $state.go or ui-sref 
        hiddenParam: 'YES',
      },
    ...

परमों के लिए उपलब्ध सेटिंग्स को $ राज्यप्रोपिडर के प्रलेखन में वर्णित किया गया है

नीचे सिर्फ एक अर्क है

• मान - {ऑब्जेक्ट | फ़ंक्शन =} : इस पैरामीटर के लिए डिफ़ॉल्ट मान निर्दिष्ट करता है। यह स्पष्ट रूप से इस पैरामीटर को वैकल्पिक के रूप में सेट करता है ...
• सरणी - {बूलियन =}: (डिफ़ॉल्ट: गलत) यदि सही है, तो मान को एक सरणी मान के रूप में माना जाएगा।
• स्क्वैश - {बूल | स्ट्रिंग =}: स्क्वैश कॉन्फ़िगर करता है कि URL में एक डिफ़ॉल्ट पैरामीटर मान कैसे दर्शाया जाता है जब वर्तमान पैरामीटर मान डिफ़ॉल्ट मान के समान होता है।

हम इन पैरामेट्स को इस तरह कह सकते हैं:

// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&amp;bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">

इसे यहां कार्रवाई में देखें

Comments

महान जवाब लेकिन क्या होगा अगर मैं ऐसा कुछ करना चाहता हूं - <a ui-sref="profile.dashboard()aintUserId: [kellingvagibusUser.icdoUser.idoUser.userIdatalog/search/); इस काम नहीं करता है। मैं किस तरह इसे काम पर लगा सकता हूँ?

— फहद मुल्लाजी

@Radim, क्या आप stackoverflow.com/questions/41429784/… पर एक नज़र डाल सकते हैं और मेरी थोड़ी मदद कर सकते हैं

— user203687

यह वास्तव में मददगार था! इसे पोस्ट करने के लिए आपका धन्यवाद।

— शौकात मिर्जा

महान जवाब, यह वास्तव में उपयोगी है। धन्यवाद !

— वेंकट

आप इस तरह एक यूआरएल भी कर सकते हैं:url: "/:id?foo&bar"

— चिकन सूप

Answer 2

जरूरी नहीं कि आपको URL के अंदर पैरामीटर होना चाहिए।

उदाहरण के लिए, इसके साथ:

$stateProvider
.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'home.html',
      controller: 'MainRootCtrl'

    },
  },
  params: {
    foo: null,
    bar: null
  }
})

आप या तो उपयोग करके राज्य को पैरामीटर भेज पाएंगे:

$state.go('home', {foo: true, bar: 1});
// or
<a ui-sref="home({foo: true, bar: 1})">Go!</a>

बेशक, यदि आप homeराज्य पर एक बार पृष्ठ पुनः लोड करते हैं, तो आप राज्य मापदंडों को ढीला कर देंगे, क्योंकि वे कहीं भी संग्रहीत नहीं हैं।

इस व्यवहार का एक पूरा विवरण यहां अनुभाग paramsमें पंक्ति के तहत प्रलेखित हैstate(name, stateConfig) ।

Comments

परम गुण, मेरे लिए बहुत अच्छा काम किया !!!!!! धन्यवाद!! You’re A GOOGLE EXPERT

— लुकास

Answer 3

आप बस चूक गए $stateParam, यह होना चाहिए $stateParams(एस के साथ)। इसलिए आप अपरिभाषित हो जाते हैं;)

Comments

आम तौर पर यह सवाल में एक टिप्पणी के रूप में जाना चाहिए। लेकिन वैसे भी प्रश्न को पढ़ने और समस्या को समझने के लिए किए गए प्रयासों के लिए :) :)

— अनमोल सराफ