আমি UI-রাউটার v0.2.0 এর সাথে AngularJS v1.2.0-rc.2 ব্যবহার করছি। আমি রেফারার রাষ্ট্রটি অন্য একটি রাজ্যে পাস করতে চাই তাই আমি toParamsএর $state.goমতো এর ব্যবহারটি করব :
$state.go('toState', {referer: $state.current.name});দস্তাবেজগুলির মতে , $stateParamsএটি toStateনিয়ামকের উপর থাকা উচিত , তবে এটি undefined। আমি কী মিস করছি?
আমি প্রদর্শন করার জন্য একটি প্লাঙ্ক তৈরি করেছি:
উত্তর:
আপনি অ URL টি রাষ্ট্র পাস করতে চান তাহলে, তারপর আপনি ব্যবহার করা উচিত নয় urlআপ আপনার সেটিং state। আমি একটি পিআর এর উত্তর পেয়েছি এবং আরও বুঝতে আরও কিছু বানর বানিয়েছি।
$stateProvider.state('toState', {
templateUrl:'wokka.html',
controller:'stateController',
params: {
'referer': 'some default',
'param2': 'some default',
'etc': 'some default'
}
});তারপরে আপনি এটিকে এভাবে নেভিগেট করতে পারেন:
$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });বা:
var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);এবং এইচটিএমএলে এইভাবে:
<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>এই ব্যবহারের ঘটনাটি ডকুমেন্টেশনে সম্পূর্ণ উন্মোচিত, তবে আমি মনে করি এটি ইউআরএল না ব্যবহার করে রাষ্ট্রের উত্তরণে একটি শক্তিশালী উপায়।
{referer: true, param2: true, etc: true}
নাথন ম্যাথিউসের সমাধানটি আমার পক্ষে কাজ করে নি তবে এটি সম্পূর্ণ সঠিক তবে কার্যকারণে পৌঁছানোর পক্ষে সামান্যই বক্তব্য রয়েছে:
মূল বিষয় হ'ল: সংজ্ঞায়িত প্যারামিটার এবং $ state.go- এর প্যারামাসের ধরণটি রাষ্ট্রের উত্তরণের উভয় পক্ষের একই অ্যারে বা অবজেক্ট হওয়া উচিত।
উদাহরণস্বরূপ, যখন আপনি একটি রাজ্যে কোনও প্যারামগুলি সংজ্ঞায়িত করেন নীচে আপনি অর্থ প্যারামগুলি অ্যারে হয় কারণ "[]" ব্যবহার করার কারণে:
$stateProvider
.state('home', {
templateUrl: 'home',
controller: 'homeController'
})
.state('view', {
templateUrl: 'overview',
params: ['index', 'anotherKey'],
controller: 'overviewController'
})সুতরাং আপনার এইরকম হিসাবে অ্যারে হিসাবে পারমগুলিতে পাস করা উচিত:
params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)এবং আপনি এগুলি $ stateParams এর মাধ্যমে এই জাতীয় অ্যারে হিসাবে অ্যাক্সেস করতে পারেন:
app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams[0];
var anotherKey = $stateParams[1];
});আরও ভাল সমাধান উভয় পক্ষের অ্যারের পরিবর্তে অবজেক্ট ব্যবহার করা হয় :
$stateProvider
.state('home', {
templateUrl: 'home',
controller: 'homeController'
})
.state('view', {
templateUrl: 'overview',
params: {'index': null, 'anotherKey': null},
controller: 'overviewController'
})আমি প্যারাম সংজ্ঞায়] with দিয়ে [] প্রতিস্থাপন করেছি। প্যারামগুলিতে P state.go এ যাওয়ার জন্য আপনার অ্যারের পরিবর্তে অবজেক্টটি ব্যবহার করা উচিত:
$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })তারপরে আপনি এগুলি সহজেই $ stateParams- এর মাধ্যমে অ্যাক্সেস করতে পারবেন:
app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
});params: {'index', 'anotherKey'},সঙ্গে params: {'index' : 'dummy', 'anotherKey' : 'dummy'},অন্যথায় এটি একটি বৈধ জাভাস্ক্রিপ্ট অবজেক্ট নয়
আমাকে যা করতে হয়েছিল তা হ'ল ইউআরএল রাজ্যের সংজ্ঞায় একটি প্যারামিটার যুক্ত করা উচিত
url: '/toState?referer'ডোহ!
/toState/:refererসিনট্যাক্সের সাথে কাজ করার জন্য আমি কেবল এটিই পেতে পারি তার $location.path()পরিবর্তে ব্যবহার করা $state.go()।
এটি ইউআই-রাউটার v0.2.0 এর সাথে AngularJS v1.2.0-rc.2 এর সাথে কাজ করবে কিনা তা নিশ্চিত নয়। আমি এই সমাধানটি ইউআই-রাউটার v0.2.13 এর সাথে AngularJS v1.3.14 এ পরীক্ষা করেছি।
আমি কেবল বুঝতে পেরেছি যে gWn এর পরামর্শ অনুসারে ইউআরএলটিতে প্যারামিটারটি পাস করার প্রয়োজন নেই।
আপনার রাষ্ট্রীয় সংজ্ঞাতে কেবলমাত্র একটি পরামিতি একটি ডিফল্ট মান সহ যুক্ত করুন। আপনার রাজ্যের এখনও একটি url মান থাকতে পারে।
$stateProvider.state('state1', {
url : '/url',
templateUrl : "new.html",
controller : 'TestController',
params: {new_param: null}
});এবং পরম যোগ করুন $state.go()
$state.go('state1',{new_param: "Going places!"});এই পৃষ্ঠায় এই উদাহরণগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। এটিই আমি ব্যবহার করেছি এবং এটি ভালভাবে কাজ করেছে। কিছু সমাধান বলেছে আপনি url $ state.go () এর সাথে একত্রিত করতে পারবেন না তবে এটি সত্য নয়। অবাস্তব বিষয়টি হ'ল ইউআরএলটির জন্য আপনাকে অবশ্যই প্যারামগুলি সংজ্ঞায়িত করতে হবে এবং প্যারামগুলিও তালিকাবদ্ধ করতে হবে। দুজনকেই উপস্থিত থাকতে হবে। কৌণিক 1.4.8 এবং ইউআই রাউটার 0.2.15 এ পরীক্ষিত।
ইন রাষ্ট্র রাষ্ট্র শেষে আপনার প্যারাম যোগ করতে পারেন এবং প্যারাম সংজ্ঞায়িত:
url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}আপনার নিয়ামকটিতে আপনার গো বিবৃতি এর মতো দেখতে পাবেন:
$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });তারপরে প্যারামগুলি টানতে এবং সেগুলি আপনার নতুন রাজ্যের নিয়ামক হিসাবে ব্যবহার করতে (আপনার কন্ট্রোলার ফাংশনে $ stateParams এ যেতে ভুলবেন না):
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!আমার ক্ষেত্রে আমি এখানে প্রদত্ত সমস্ত অপশন দিয়ে চেষ্টা করেছি, তবে কেউ সঠিকভাবে কাজ করছে না (কৌণিক 1.3.13, আয়নিক 1.0.0, কৌণিক-ইউআই-রাউটার 0.2.13)। সমাধানটি ছিল:
.state('tab.friends', {
url: '/friends/:param1/:param2',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})এবং রাজ্যে।
$state.go('tab.friends', {param1 : val1, param2 : val2});চিয়ার্স
আমি আয়নিক / অ্যাঙ্গুলারের $ রাষ্ট্র এবং $ রাজ্যপ্রেমগুলির সাথে লড়াই করে বেশ ভাল সময় ব্যয় করেছি;
$ State.go () এবং $ stateParams ব্যবহার করতে আপনার অবশ্যই কিছু জিনিস সেটআপ করতে হবে এবং অন্যান্য প্যারামিটার উপস্থিত থাকতে হবে না।
আমার app.config () এ আমি $ statePovider অন্তর্ভুক্ত করেছি এবং এর মধ্যে বেশ কয়েকটি রাজ্য সংজ্ঞায়িত করেছি:
$stateProvider
.state('home', {
templateUrl: 'home',
controller: 'homeController'
})
.state('view', {
templateUrl: 'overview',
params: ['index', 'anotherKey'],
controller: 'overviewController'
})paramsকী বিশেষভাবে গুরুত্বপূর্ণ। পাশাপাশি লক্ষ্য করুন, নেইurl কী উপস্থিত রয়েছে ... রাষ্ট্রপরিম ব্যবহার করে এবং ইউআরএল মিশ্রিত হয় না। তারা একে অপরের সাথে পারস্পরিক একচেটিয়া।
$ State.go () কলটিতে এটিকে সংজ্ঞায়িত করুন:
$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })indexএবং anotherKeyযদি তারা প্রথম $ stateController তালিকাভুক্ত করা হয় $ stateParams ভেরিয়েবল শুধুমাত্র পূরণ করা হবেparams সংজ্ঞায়িত কী।
নিয়ন্ত্রকের মধ্যে illust স্টেটের প্যারামগুলি চিত্রিত হিসাবে অন্তর্ভুক্ত করুন:
app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
});পাস করা ভেরিয়েবলগুলি পাওয়া উচিত!
reload: true ?দীর্ঘকাল যা চলছে তা অনুমান করতে পারিনি - দেখা যাচ্ছে আমি নিজেকে বোকা বানাচ্ছিলাম। আপনি যদি নিশ্চিত হন যে জিনিসগুলি সঠিকভাবে লেখা হয়েছে এবং আপনি একই অবস্থা ব্যবহার করতে চান, চেষ্টা করুন reload: true:
.state('status.item', {
url: '/:id',
views: {...}
}
$state.go('status.item', { id: $scope.id }, { reload: true });আশা করি এটি আপনার সময় বাঁচায়!
আমিও একই ধরণের সমস্যার মুখোমুখি হয়েছি। প্রচুর গুগলিং এবং পরীক্ষা এবং পরীক্ষার পরে আমি একটি ওয়ার্কিং সলিউশন দিয়ে শেষ করেছি। এখানে আমার সমাধান যা আপনার পক্ষে কাজ করবে।
- আমি দুই কন্ট্রোলার আছে searchBoxController এবং stateResultController এবং একটি প্যারামিটার নামে searchQuery একটি দৃশ্য দেখাচ্ছে ফলাফল একটি দূরবর্তী সার্ভারে থেকে সংগ্রহ একটি দৃশ্য করার জন্য একটি সার্চ বক্স থাকার থেকে পাশ করা হবে। আপনি এটি এইভাবে করেন:
নীচে এমন নিয়ামক রয়েছে যা থেকে আপনি পরবর্তী ভিউটি ব্যবহার করে কল করেন call $state.go()
.controller('searchBoxController', function ($scope, $state) {
$scope.doSearch = function(){
var searchInputRaw = $scope.searchQueryInput;
$state.go('app.searchResults', { searchQuery: searchInput });
}
})নীচে এমন রাষ্ট্র রয়েছে যা ডাকা হবে যখন ডাকা হবে $state.go():
.state('app.searchResults',
{
url: '/searchResults',
views:
{
'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
},
params:
{
'searchQuery': ''
}
})এবং অবশেষে, app.searchResultsরাষ্ট্রের সাথে যুক্ত নিয়ন্ত্রক :
.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
$scope.searchQueryInput = $stateParams.searchQuery;
});এবং আমার পিতামাতা / শিশু রাষ্ট্রের ক্ষেত্রে। শিশু রাষ্ট্রে ঘোষিত সমস্ত প্যারামিটারগুলি প্যারেন্ট রাষ্ট্রের দ্বারা জানা উচিত
.state('full', {
url: '/full',
templateUrl: 'js/content/templates/FullReadView.html',
params: { opmlFeed:null, source:null },
controller: 'FullReadCtrl'
})
.state('full.readFeed', {
url: '/readFeed',
views: {
'full': {
templateUrl: 'js/content/templates/ReadFeedView.html',
params: { opmlFeed:null, source:null },
controller: 'ReadFeedCtrl'
}
}
})2 প্যারামিটার নিয়ে একটি রাষ্ট্রের সমাধানের সমাধানটি আমরা পরিবর্তিত হচ্ছিলাম:
.state('somestate', {
url: '/somestate',
views: {...}
}প্রতি
.state('somestate', {
url: '/somestate?id=:&sub=:',
views: {...}
}আপনার রাউটার.জেএস এ নিম্নলিখিত সংজ্ঞা দেওয়া হয়েছে
$stateProvider.state('users', {
url: '/users',
controller: 'UsersCtrl',
params: {
obj: null
}
})আপনার নিয়ামক $ stateParams যোগ প্রয়োজন।
function UserCtrl($stateParams) {
console.log($stateParams);
}আপনি নিম্নরূপ হিসাবে পরামিতি দ্বারা একটি বস্তু প্রেরণ করতে পারেন।
$state.go('users', {obj:yourObj});আমি পৃষ্ঠা 1 থেকে 2 এ নেভিগেট করার চেষ্টা করছিলাম এবং আমাকে কিছু তথ্যও পাস করতে হয়েছিল।
আমার রাউটার.জেজে , আমি প্যারামের নাম এবং বয়স যুক্ত করেছি :
.state('page2', {
url: '/vehicle/:source',
params: {name: null, age: null},
.................পৃষ্ঠা 1 এ , পরবর্তী বোতামটির অন ক্লিক করুন:
$state.go("page2", {name: 'Ron', age: '20'});ইন Page2 , আমি ঐ প্যারাম অ্যাক্সেস করতে পারে:
$stateParams.name
$stateParams.ageএটি যদি এমন কোয়েরি প্যারামিটার হয় যা আপনি এভাবে পাস করতে চান:
/toState?referer=current_user
তারপরে আপনার নিজের রাজ্যটি এভাবে বর্ণনা করতে হবে:
$stateProvider.state('toState', {
url:'toState?referer',
views:{'...'}
});উত্স: https://github.com/angular-ui/ui-router/wiki/URL- রাউটিং
paramsঅ্যারেতে ।