如何使用 ui-router 将对象从 1 $state 发送到另一个 $state [英] How to send object from 1 $state into another $state with ui-router
问题描述
App 的当前状态路径:-> login >容器 >标签
股票代码组件中的股票代码按钮点击:
$scope.clickTicker = function(ticker) {console.log('点击了股票代码!', 股票代码)$state.go('tags', { ticker: ticker });}
app.container.html (我们登录后到这里) container state
<仪表板模块></仪表板模块><feed-module></feed-module>
dashboard.html dashboard state
<h1>仪表板</h1><div class="row"><tickers-module></tickers-module><tags-module></tags-module><视图模块></视图模块><社交模块></社交模块>
<小时>
完整代码
//容器模块///////////////////////////////////////////////////////////////////////////////var container = angular.module('container', ['ui.router'])container.config(function($stateProvider) {const 容器 = {name: '容器',url: '/容器',templateUrl: 'app.container.html'}$stateProvider.state(容器);});//代码模块///////////////////////////////////////////////////////////////////////////////var tickers = angular.module('tickers', ['ui.router'])tickers.config(function($stateProvider) {常量代码 = {name: 'tickers',url: '/tickers',参数:{代码:{}},//父级:'仪表板',templateUrl: '<p>Tickers State</p>',控制器:函数($scope,$state){console.log('Tickers state', $state.params);}}$stateProvider.state(tickers);})tickers.component('tickersModule', {templateUrl: 'tickers-module-template.html',控制器:函数($scope,$state){console.log('Tickers 组件', $state.params);$scope.tickers = [{ id: 1, 股票代码: 'AAPL' },{ id: 2, 代码: 'GOOG' },{ id: 3, 代码: 'TWTR' }];$scope.clickTicker = function(ticker) {console.log('点击了股票代码!', 股票代码)$state.go('tags', { ticker: ticker });}}});//标签模块///////////////////////////////////////////////////////////////////////////////var tags = angular.module('tags', ['ui.router'])标签.配置(功能($stateProvider){const 标签 = {名称标签',网址:'/标签',参数:{代码:{}},//父级:'仪表板',模板:'<p>标签状态</p>',控制器:函数($scope,$state){console.log('标签状态', $state.params);}}$stateProvider.state(tags);})tags.component('tagsModule', {templateUrl: 'tags-module-template.html',控制器:函数($scope,$state){console.log('标签组件', $state.params);const tags_model = [{股票代码:'AAPL',标签 : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]},{股票代码:'GOOG',标签: [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]},{股票代码:'TWTR',标签: [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]}];功能 matchTags(股票代码,模型){返回模型.过滤器(函数(对象){如果(obj.ticker === 股票代码){ 返回 obj;}});}$scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];$scope.clickTag = 函数(标签){$state.go('tags', { tag: tag });}console.log('标签初始化', $state.params);}});//视图头模块///////////////////////////////////////////////////////////////////////////////var view = angular.module('view', ['ui.router'])view.config(function($stateProvider) {常量视图 = {name: '视图',网址:'/查看',参数:{标签: {}},模板:'<p>视图状态</p>',}$stateProvider.state(view);})view.component('viewModule', {templateUrl: 'view-module-template.html',控制器:函数($scope,$state){console.log('查看组件', $state.params);$scope.tag = $state.params.tag;}});//社交模块///////////////////////////////////////////////////////////////////////////////var social = angular.module('social', ['ui.router'])社会配置(功能($stateProvider){const 社会 = {name: '社交',网址:'/社会',参数:{标签: {}},模板:'<p>社会状态</p>',}$stateProvider.state(social);})social.component('socialModule', {templateUrl: 'social-module-template.html',控制器:函数($scope,$state){console.log('社交组件', $state.params);$scope.tag = $state.params.tag;}});//饲料模块///////////////////////////////////////////////////////////////////////////////var feed = angular.module('feed', ['ui.router'])feed.config(function($stateProvider) {常量提要 = {name: '饲料',网址:'/饲料',templateUrl: '<em>Feed 项目放在这里.</em>'}$stateProvider.state(feed);})feed.component('feedModule', {templateUrl: 'feed-module-template.html',控制器:函数($scope,$state){console.log('Feed init (only once)', $state.params);}});//RouterApp 模块///////////////////////////////////////////////////////////////////////////////var routerApp = angular.module('routerApp', ['ui.router', 'container', 'tickers', 'tags', 'view', 'social', 'feed']);routerApp.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/login');常量登录 = {name: '登录',网址:'/登录',templateUrl: 'login.html',bindToController: 真,controllerAs: 'l',控制器:功能($状态){this.login = function() {$state.go('容器', {});}}}常量仪表板 = {name: '仪表板',网址:'/仪表板',参数:{代码:{},标签:{}},意见:{'' : {templateUrl: 'dashboard.html',}}}$stateProvider.state(登录).state(仪表板);})container.component('dashboardModule', {templateUrl: 'dashboard.html',控制器:函数($scope,$state){console.log('');console.log('仪表板组件', $state.params);}})
有更新的 plunker
即我们必须将tags状态设置为container
one
const 标签 = {//这里我们使用 parent 作为我们子状态的占位符父级:'容器',名称标签',网址:'/标签',
此外,模板中的容器状态现在有一个目标
最后 - tags stat 将 tags-module 作为其模板的一部分
template: '标签状态
',
检查它这里 并且为了更多地了解嵌套,也许检查这个:
https://plnkr.co/edit/nqyBTcBgBimjkrpf2oYo?p=preview
Expected
After Login Selecting a Ticker button should make the Tags module display the matching Tags for that Ticker.
Results
After Login Selecting a Ticker button will replace the entire app in the index's ui-view with the Tags $state object.
App's current state path: -> login > container > tags
The ticker button click in the Tickers component:
$scope.clickTicker = function(ticker) {
console.log(' Ticker clicked!', ticker)
$state.go('tags', { ticker: ticker });
}
app.container.html (We go here after login) container state
<div>
<dashboard-module></dashboard-module>
<feed-module></feed-module>
</div>
dashboard.html dashboard state
<div class="jumbotron text-center">
<h1>The Dashboard</h1>
</div>
<div class="row">
<tickers-module></tickers-module>
<tags-module></tags-module>
<view-module></view-module>
<social-module></social-module>
</div>
Full Code
// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
container.config(function($stateProvider) {
const container = {
name: 'container',
url: '/container',
templateUrl: 'app.container.html'
}
$stateProvider.state(container);
});
// Tickers module
////////////////////////////////////////////////////////////////////////////////
var tickers = angular.module('tickers', ['ui.router'])
tickers.config(function($stateProvider) {
const tickers = {
name: 'tickers',
url: '/tickers',
params: {
ticker: {}
},
// parent: 'dashboard',
templateUrl: '<p>Tickers State</p>',
controller: function($scope, $state) {
console.log('Tickers state', $state.params);
}
}
$stateProvider.state(tickers);
})
tickers.component('tickersModule', {
templateUrl: 'tickers-module-template.html',
controller: function($scope, $state) {
console.log('Tickers component', $state.params);
$scope.tickers = [
{ id: 1, ticker: 'AAPL' },
{ id: 2, ticker: 'GOOG' },
{ id: 3, ticker: 'TWTR' }
];
$scope.clickTicker = function(ticker) {
console.log(' Ticker clicked!', ticker)
$state.go('tags', { ticker: ticker });
}
}
});
// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
tags.config(function($stateProvider) {
const tags = {
name: 'tags',
url: '/tags',
params: {
ticker: {}
},
// parent: 'dashboard',
template: '<p>Tags State</p>',
controller: function($scope, $state) {
console.log('Tags state', $state.params);
}
}
$stateProvider.state(tags);
})
tags.component('tagsModule', {
templateUrl: 'tags-module-template.html',
controller: function($scope, $state) {
console.log('Tags component', $state.params);
const tags_model = [
{
ticker: 'AAPL',
tags : [{ id: 1, term: 'iPhone 7' }, { id: 2, term: 'iPhone 8' }, { id: 3, term: 'Tim Cook' }]
},
{
ticker: 'GOOG',
tags : [{ id: 4, term: 'Pixel' }, { id: 5, term: 'Pixel XL' }, { id: 6, term: 'Chrome Book' }]
},
{
ticker: 'TWTR',
tags : [{ id: 7, term: 'tweet' }, { id: 8, term: 'retweet' }, { id: 9, term: 'moments' }]
}
];
function matchTags(ticker, model) {
return model.filter(function(obj){
if (obj.ticker === ticker) { return obj; }
});
}
$scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];
$scope.clickTag = function(tag) {
$state.go('tags', { tag: tag });
}
console.log('Tags init', $state.params);
}
});
// ViewHeader module
////////////////////////////////////////////////////////////////////////////////
var view = angular.module('view', ['ui.router'])
view.config(function($stateProvider) {
const view = {
name: 'view',
url: '/view',
params: {
tag: {}
},
template: '<p>View state</p>',
}
$stateProvider.state(view);
})
view.component('viewModule', {
templateUrl: 'view-module-template.html',
controller: function($scope, $state) {
console.log('View component', $state.params);
$scope.tag = $state.params.tag;
}
});
// Social module
////////////////////////////////////////////////////////////////////////////////
var social = angular.module('social', ['ui.router'])
social.config(function($stateProvider) {
const social = {
name: 'social',
url: '/social',
params: {
tag: {}
},
template: '<p>Social state</p>',
}
$stateProvider.state(social);
})
social.component('socialModule', {
templateUrl: 'social-module-template.html',
controller: function($scope, $state) {
console.log('Social component', $state.params);
$scope.tag = $state.params.tag;
}
});
// Feed module
////////////////////////////////////////////////////////////////////////////////
var feed = angular.module('feed', ['ui.router'])
feed.config(function($stateProvider) {
const feed = {
name: 'feed',
url: '/feed',
templateUrl: '<em>Feed items go here.</em>'
}
$stateProvider.state(feed);
})
feed.component('feedModule', {
templateUrl: 'feed-module-template.html',
controller: function($scope, $state) {
console.log('Feed init (only once)', $state.params);
}
});
// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'container', 'tickers', 'tags', 'view', 'social', 'feed']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
const login = {
name: 'login',
url: '/login',
templateUrl: 'login.html',
bindToController: true,
controllerAs: 'l',
controller: function($state) {
this.login = function() {
$state.go('container', {});
}
}
}
const dashboard = {
name: 'dashboard',
url: '/dashboard',
params: {
ticker: {},
tags: {}
},
views: {
'' : {
templateUrl: 'dashboard.html',
}
}
}
$stateProvider
.state(login)
.state(dashboard);
})
container.component('dashboardModule', {
templateUrl: 'dashboard.html',
controller: function($scope, $state) {
console.log('');
console.log('Dashboard component', $state.params);
}
})
There is the updated plunker
Namely we have to set a tags state as a child of container
one
const tags = {
// here we use parent as a placeholder for our child state
parent: 'container',
name: 'tags',
url: '/tags',
also, the container state now in template has a target
<div ui-view>
</div>
And finally - tags stat has as a part of its template the tags-module
template: '<p>Tags State</p><tags-module></tags-module>',
Check it here and also to get more understanding about nesting, maybe check this:
这篇关于如何使用 ui-router 将对象从 1 $state 发送到另一个 $state的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!