无法转换为抽象状态(Angular-UI-Router) [英] Cannot transition to abstract state (angular-ui-router)
问题描述
https://plnkr.co/edit/5JhQx64WF3tgdm02qKzJ?p=preview
我破坏应用程序的全部工作就是删除ui-sref(我从不喜欢使用它),并在Javascript中添加了$state.go
.
All I did that broke my app was remove the ui-sref (I never like using that anyways) and went with a $state.go
inside of the Javascript.
<tr ng-repeat="ticker in tickers">
<!--<td>{{ ticker }} <button ui-sref="dash.tags({ticker: ticker})">Click Me</button></td>-->
<td>{{ ticker }} <button ng-click="clickTicker(ticker)">Click Me</button></td>
</tr>
$scope.clickTicker = function(ticker) {
$state.go('dash', { ticker: ticker });
}
如果我的父dashboard
状态对象中没有abstract: true
,则由于某种原因,我的TagsList组件会消失.
If I don't have abstract: true
in my parent dashboard
state object then for some reason my TagsList component disappears.
下面的完整代码:
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dash?AAA');
var dash = {
name: 'dash',
url: '/dash',
abstract: true,
views: {
'': { templateUrl: 'dashboard.html' },
'tickersList@dash': {
templateUrl: 'tickers-list.html',
controller: 'tickersController'
},
'alertsList@dash': {
controller: 'alertsController',
templateUrl: 'alerts-list.html',
}
}
};
var tickers = {
name: 'dash.tickers',
url: '?ticker',
params: {
ticker: 'AAA'
},
views: {
'tickersList@dash': {
templateUrl: 'tickers-list.html',
controller: 'tickersController'
}
}
}
var tags = {
name: 'dash.tags',
url: '?ticker',
params: {
ticker: 'AAA'
},
views: {
'tagsList@dash': {
templateUrl: 'tags-list.html',
controller: 'tagsController'
}
}
}
$stateProvider
.state(dash)
.state(tags)
});
routerApp.controller('tagsController', function($scope, $state, $stateParams) {
$scope.ticker = $state.params.ticker;
function getList(ticker) {
switch(ticker) {
case 'AAA' : return ['aaa tag 1', 'aaa tag 2', 'aaa tag 3'];
case 'BBB' : return ['bbb tag 1', 'bbb tag 2', 'bbb tag 3'];
case 'CCC' : return ['ccc tag 1', 'ccc tag 2', 'ccc tag 3'];
}
}
$scope.tags = getList($state.params.ticker);
this.$onInit = function() {
console.log('onInit tagsController');
};
});
routerApp.controller('tickersController', function($scope, $state) {
$scope.tickers = [
'AAA', 'BBB', 'CCC'
];
$scope.clickTicker = function(ticker) {
$state.go('dash', { ticker: ticker });
}
this.$onInit = function() {
console.log('onInit tickersController', $state.params.ticker);
};
});
routerApp.controller('alertsController', function($scope, $state) {
this.$onInit = function() {
console.log('onInit alertsController', $state.params.ticker);
};
});
推荐答案
使用$state.go
进入/dash?ticker=ticker
,但是/dash
是抽象状态,所以这就是为什么会出错的原因.
With $state.go
you go to /dash?ticker=ticker
, but /dash
is an abstract state, so this is why you get an error.
您的tickers
和tags
状态的URL定义不正确.您可能想要类似url: 'tickers?ticker'
的东西.
Your tickers
and tags
states have their urls defined incorrectly. You probably want something like url: 'tickers?ticker'
.
这篇关于无法转换为抽象状态(Angular-UI-Router)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!