Plnkr：https ://plnkr.co/edit/Brmcxd2LjGVJ6DXwuJtF?p=preview
建筑学：
$login-> $container（包含$dashboard和$feed），包含dashboard：$tickers、、$tags和组件。$viewHeader$socialMedia
目标：
tags需要进行通信并将标签对象发送到viewHeaderandsocialMedia状态。
预期的：
之后Login，在标签列表中选择一个按钮应将其发送tag到ViewHeader和SocialMedia状态/组件。
结果：
之后Login，在标签中选择一个按钮并转到 $statedashboard以用于ViewHeader和SocialMedia刷新，但视图模型变量{{ term }}不会使用任一组件中的适当标签进行更新。
设计说明：
我试图通过混合状态、组件、兄弟组件和视图来解决的问题是，当任何状态发生变化时，应用程序中的每个组件都会刷新/重新启动。$state.go('dashboard'...
这并不理想，我想要的是确保只有需要刷新、刷新的组件。
IE：当我选择Ticker或Tag时，我不希望Feed组件每次都刷新。但是，用户应该能够在Feed组件中执行操作，并且它将更新所有其他组件。
这就是我创建一个container状态来同时保存dashboard和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 });
}
}
^ 上面的 <--- 允许标签状态加载标签组件元素并根据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;
}
});
viewHeader 控制器：
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
