Setting up a demonstration to highlight an issue I am facing with sibling components and states.
Encountering the following error:
https://i.sstatic.net/uUsF8.png
Not sure what could be causing this, as our current app has it set up like this:
params: {
ticker: 'AAA'
}
https://plnkr.co/edit/zfmuZXp88cSbdOsibv3y?p=preview
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dash');
var dash = {
name: 'dash',
url: '/dash?ticker',
// params: {
// ticker: 'AAA'
// },
views: {
'': { templateUrl: 'partial-dash.html' },
'tagsList@dash': {
templateUrl: 'tags-list.html',
controller: 'tagsController'
},
'tickersList@dash': {
templateUrl: 'tickers-list.html',
controller: 'tickersController'
}
}
};
$stateProvider
.state(dash);
});
routerApp.controller('tagsController', function($scope) {
$scope.tags = [
'tag 1', 'tag 2', 'tag 3'
];
$onInit = function() {
console.log('onInit tagsController');
};
});
routerApp.controller('tickersController', function($scope, $state) {
// $scope changeScotchState = function() {
// $state.go('about', { scotch: true });
// };
$scope.tickers = [
'AAA', 'BBB', 'CCC'
];
$onInit = function() {
console.log('onInit tickersController');
console.log('$state.ticker', $state.params.ticker)
};
});