【发布时间】：2017-03-22 19:31:13
【问题描述】：
Plnkr 链接https://plnkr.co/edit/6dLIk1vq6M1Dsgy8Y4Zk?p=preview
预期
在Login 选择一个Ticker 之后应该将该ticker 对象发送到Tags 状态。然后它将初始化标签状态，代码将检查已选择/传入的代码，然后显示适当的标签列表。
结果
选择代码不会更新标签状态，也不会做任何事情。
注意下面的截图，点击 Ticker 按钮后没有组件或状态日志：
我尝试过的（来自ticters.component 控制器）：
$scope.clickTicker = function(ticker) {
console.log(' Ticker clicked!', $state)
$state.go('tags', { ticker: ticker });
}
和
$scope.clickTicker = function(ticker) {
console.log(' Ticker clicked!', $state)
$state.go('tickers.tags', { ticker: ticker });
}
代码模块
// Tickers module
////////////////////////////////////////////////////////////////////////////////
var tickers = angular.module('tickers', ['ui.router'])
tickers.config(function($stateProvider) {
const tickers = {
parent: 'dashboard',
name: 'tickers',
url: '/tickers',
params: {
ticker: {}
},
views: {
'': {
templateUrl: 'tickers-template.html',
controller: function($scope, $state) {
console.log('TICKERS view $state');
$scope.tickers = [
{ id: 1, ticker: 'AAPL' },
{ id: 2, ticker: 'GOOG' },
{ id: 3, ticker: 'TWTR' }
];
$scope.clickTicker = function(ticker) {
console.log('ticker', ticker)
$state.go('tags', { ticker: ticker });
}
}
},
'tags@tickers': {
templateUrl: 'tags-template.html',
controller: function($scope) {
console.log('TAGS view $state');
}
}
}
}
$stateProvider.state(tickers);
})
tickers.component('tickersModule', {
templateUrl: 'tickers-template.html',
controller: function($scope, $state) {
console.log('TICKERS component');
$scope.tickers = [
{ id: 1, ticker: 'AAPL' },
{ id: 2, ticker: 'GOOG' },
{ id: 3, ticker: 'TWTR' }
];
$scope.clickTicker = function(ticker) {
console.log(' Ticker clicked!', $state)
$state.go('tags', { ticker: ticker });
}
}
});
代码模板
<div class="tickers-state">
<div class="fl w100">
<em>Tickers state</em>
</div>
<div class="tickers-panel">
<div class="tickers-list">
<ul>
<li ng-repeat="ticker in tickers" class="fl">
<button ng-click="clickTicker(ticker)">{{ ticker.ticker }}</button>
</li>
</ul>
</div>
</div>
<tags-module class="fl"></tags-module>
</div>
标签模块
// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
tags.config(function($stateProvider) {
const tags = {
name: 'tags',
url: '/tags',
params: {
ticker: {},
tag: {}
},
parent: 'tickers',
views: {
'': {
templateUrl: 'tags-template.html',
controller: function($scope, $state) {
console.log('Tags view $state', $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);
}
},
'view@tags': {
templateUrl: 'view-template.html',
controller: function($scope, $state) {
console.log('VIEWS view $state');
$scope.term = $state.params.tag.term;
}
},
'chart@tags': {
templateUrl: 'chart-template.html',
controller: function($scope, $state) {
console.log('CHART view $state');
$scope.term = $state.params.tag.term;
}
},
'social@tags': {
templateUrl: 'social-template.html',
controller: function($scope, $state) {
console.log('SOCIAL view $state');
$scope.term = $state.params.tag.term;
}
}
}
}
$stateProvider.state(tags);
})
tags.component('tagsModule', {
templateUrl: 'tags-template.html',
controller: function($scope, $state) {
console.log('TAGS component', $state.params);
}
});
【问题讨论】：
-
你的 plunker 在控制台中不断给出这个错误：TypeError: Cannot read property 'term' of undefined。我记得在您之前的问题中解决了它。你能解决这个问题并更新你的 plunker 吗？
-
@leon 您附上的屏幕截图没有显示有关切换状态的任何错误。但是在您的 plunkr 中，我得到了
Could not resolve 'tickers.tags' from state 'container'，这实际上是有道理的，因为 Ticker 有一个名为“dashboard”的父级.. -
嗯，我没有收到任何错误，我点击了“冻结”按钮，也许可以解决它？
-
好的，接下来的 24 小时我都处于离线状态。如果到时候没人帮你，我明天去看看。
标签： javascript angularjs angular-ui-router