Plnkr: https://plnkr.co/edit/Brmcxd2LjGVJ6DXwuJtF?p=preview
建筑学:
$login
-> $container
(包含$dashboard
and $feed
), dashboard
包含:$tickers
, $tags
, $viewHeader
and $socialMedia
成分。
Goal:
tags
需要通信并将标签对象发送到viewHeader
and socialMedia
states.
预期的:
After Login, selecting a button in the Tags list should send that tag
into the ViewHeader and SocialMedia states/components.
Results:
After Login, selecting a button in the Tags and going to $state dashboard
the $states for the ViewHeader and SocialMedia refresh but the view model variable {{ term }}
does not update with the appropriate tag in either component.
设计说明:
我试图通过混合状态、组件、同级组件和视图来解决的问题是,当任何状态发生变化时,应用程序中的每个组件总是刷新/重新启动。$state.go('dashboard'...
这并不理想,我想要的是确保只有需要刷新的组件才刷新。
IE:当我选择Ticker or a Tag我不想要Feed组件每次刷新。然而,用户应该能够在Feed组件,它将更新所有其他组件。
这就是为什么我创建了一个container
状态同时持有dashboard
and feed
状态。原本我拥有一切dashboard
状态,并且随时$state.go('dashboard'
发生了feed
组件也会刷新。如果有更好的办法解决这个问题lmk! :)
PS:开始学习使用 ui-router 进行状态管理以消除对 $rootScope 的依赖。到目前为止,我真正的应用程序更加稳定,但是有一个恼人的功能,即每个组件都会刷新/重新启动。
在下面的屏幕截图中,我可以清楚地看到正确的tag
正在被传递到正确的 $states,但是还没有{{ term }}
不更新。
代码片段(Plnkr 中的完整代码)
app.container.html(容器状态)
<div>
<dashboard-module></dashboard-module>
<feed-module></feed-module>
<!--<div ui-view="dashboard"></div>-->
<!--<div ui-view="feed"></div>-->
</div>
dashboard.html(仪表板状态)
<div class="jumbotron text-center">
<h1>The Dashboard</h1>
</div>
<div class="row">
<tickers-module></tickers-module>
<!-- Tags component goes here -->
<div ui-view></div>
<view-module></view-module>
<social-module></social-module>
</div>
^ 我使用的原因<div ui-view>
上面加载标签状态的方法是迄今为止我可以初始化标签模块并显示代码组件中的标签列表的唯一方法。
股票行情组件控制器:
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' }
];
$state.go('tags', { ticker: $scope.tickers[0] }); // <---
$scope.clickTicker = function(ticker) {
$state.go('tags', { ticker: ticker });
}
}
^ 上面的
var tags = angular.module('tags', ['ui.router'])
tags.config(function($stateProvider) {
const tags = {
parent: 'container',
name: 'tags',
url: '/tags',
params: {
ticker: {}
},
template: '<tags-module></tags-module>',
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; }
});
}
$state.params.ticker = $state.params.ticker || {};
$scope.tags_model = matchTags($state.params.ticker.ticker, tags_model)[0];
$scope.clickTag = function(tag) {
console.log(' Tag clicked', $state);
$state.go('dashboard', { tag: tag });
}
}
});
标签列表中的点击功能:
$scope.clickTag = function(tag) {
console.log(' Tag clicked', $state);
$state.go('dashboard', { tag: tag });
}
社交媒体控制器:
social.component('socialModule', {
templateUrl: 'social-module-template.html',
controller: function($scope, $state) {
console.log('Social component', $state.params);
$scope.term = $state.params.tag.term;
}
});
视图标题控制器:
view.component('viewModule', {
templateUrl: 'view-module-template.html',
controller: function($scope, $state) {
console.log('View component', $state.params);
$scope.term = $state.params.tag.term;
}
});
奇怪的双倍组件
在单击标签并破坏 Social.Component 内部之后,刚刚注意到这一点。看起来仪表板组件正在重新渲染以代替标签组件:
更新了,通过添加解决了这里的问题{ refresh: true }
到标签中的 $state.go 。但请注意,这仍然没有解决我最初的任务,即阻止 feed.component 刷新。所以最终会使用服务。
https://plnkr.co/edit/R0iwJznOgEwOL7AtU5wP?p=preview