angularjs - कोणीय जेएस ui राउटर यूआरएल के बिना राज्यों के बीच डेटा गुजर रहा है





parameters angular-ui-router state (3)


पैराम ऑब्जेक्ट $ राज्य पैराम में शामिल है, लेकिन यूआरएल का हिस्सा नहीं होगा।

1) मार्ग विन्यास में:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) नियंत्रक में:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3 ए) एक नियंत्रक से राज्य बदल रहा है

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3 बी) एचटीएमएल में राज्य बदल रहा है

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

उदाहरण प्लंकर

मुझे यूआरएल में डेटा को उजागर किए बिना दो राज्यों के बीच डेटा पास करने की इस समस्या का सामना करना पड़ रहा है, ऐसा लगता है कि उपयोगकर्ता वास्तव में सीधे इस राज्य पर उतर नहीं सकता है।

उदाहरण के लिए। मेरे पास दो राज्य "ए" और "बी" हैं। मैं राज्य "ए" में कुछ सर्वर कॉल कर रहा हूं और "बी" को कॉल करने के लिए कॉल की प्रतिक्रिया उत्तीर्ण कर रहा हूं। सर्वर कॉल की प्रतिक्रिया एक स्ट्रिंग संदेश है, जो काफी लंबा है, इसलिए मैं यूआरएल में इसका पर्दाफाश नहीं कर सकता।

तो यूआरएल पैरा का उपयोग किए बिना राज्यों के बीच डेटा पास करने के लिए कोणीय यूई राउटर में कोई तरीका है?




हम params -यूआई-राउटर की नई सुविधा का उपयोग कर सकते हैं:

एपीआई संदर्भ / ui.router.state / $ राज्य प्रदाता

params एक नक्शा जो यूआरएल में घोषित पैरामीटर को वैकल्पिक रूप से कॉन्फ़िगर करता है, या अतिरिक्त गैर-यूआरएल पैरामीटर को परिभाषित करता है। प्रत्येक पैरामीटर को कॉन्फ़िगर करने के लिए, पैरामीटर के नाम पर एक कॉन्फ़िगरेशन ऑब्जेक्ट जोड़ें।

भाग देखें: " ... या अतिरिक्त गैर-यूआरएल पैरामीटर को परिभाषित करता है ... "

तो राज्य डीफ़ होगा:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

उपरोक्त वर्णित दस्तावेज़ का कुछ उदाहरण:

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

विस्तार - काम करने का उदाहरण: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

यहां राज्य परिभाषा का एक उदाहरण दिया गया है:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

यह ui-sref का उपयोग कर एक कॉल हो सकता है:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info उदाहरण देखें




मुझे '{{title}} "के साथ' @ 'और" शीर्षक "के साथ' = 'का उपयोग क्यों करना है?

जब आप {{title}} का उपयोग करते हैं, तो केवल अभिभावक स्कोप मान निर्देशक दृश्य और मूल्यांकन के लिए पारित किया जाएगा। यह एक तरफ तक सीमित है, जिसका अर्थ है कि परिवर्तन माता-पिता के दायरे में दिखाई नहीं देगा। जब आप माता-पिता के दायरे में किए गए परिवर्तनों को प्रतिबिंबित करना चाहते हैं तो आप '=' का उपयोग कर सकते हैं। यह दो तरह का है।

क्या मैं एक विशेषता के साथ अपने तत्व को सजाने के बिना सीधे माता-पिता के दायरे तक पहुंच सकता हूं?

जब निर्देश में स्कोप विशेषता होती है (दायरा: {}), तो आप अब सीधे माता-पिता के दायरे तक पहुंचने में सक्षम नहीं होंगे। लेकिन फिर भी इसे दायरे के माध्यम से एक्सेस करना संभव है। $ माता-पिता इत्यादि। यदि आप निर्देश से दायरे को हटाते हैं, तो इसे सीधे एक्सेस किया जा सकता है।

दस्तावेज़ीकरण कहता है, "अक्सर अभिव्यक्ति के माध्यम से और अभिभावक के दायरे से पृथक गुंजाइश से डेटा पास करना वांछनीय है", लेकिन यह भी द्विपक्षीय बाध्यकारी के साथ ठीक काम करता प्रतीत होता है। अभिव्यक्ति मार्ग बेहतर क्यों होगा?

यह संदर्भ के आधार पर निर्भर करता है। यदि आप डेटा के साथ एक अभिव्यक्ति या फ़ंक्शन को कॉल करना चाहते हैं, तो आप और यदि आप डेटा साझा करना चाहते हैं, तो आप '=' का उपयोग करके बाध्यकारी तरीके का उपयोग कर सकते हैं

आप नीचे दिए गए लिंक पर निर्देश देने के लिए डेटा पास करने के कई तरीकों के बीच अंतर पा सकते हैं:

AngularJS - पृथक Scopes - @ बनाम = बनाम &

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs







angularjs parameters angular-ui-router state