Module Sub Views Not Rendering In Ui-views Of Component Template
Full Plnkr code: https://plnkr.co/edit/5A5YFEWZ7ZTzRJloxgka?p=preview Expected The Tags title sub view's template should render in the Tags list. The Tags counter sub view templa
Solution 1:
I made some changes to your plunker. Here is the updated one.
The code I changed is in app.js as follows:
const tags = {
name: 'tags',
url: '/tags/:counter',
parent: 'dashboard',
views: {
'' : { template: '<p>Hi this is Tags</p>' },
'title' : { template: '<p>Tags Title!</p>' },
'counter': {
template: '<p class="counter">{{ counter }}</p>',
params: {
counter: 0
},
bindToController: true,
controller: function($scope, $stateParams) {
$scope.counter = $stateParams.counter;
}
}
}
}
Note that I'm passing counter as a param to the tags url.
I'm passing the counter value to the controller using the stateParams service. As soon as you click on count, you start seeing the values in your nested tags view. As required, the tags counter value updates when the count button is pressed.
Solution 2:
Just adding this answer because several questions and forked plnkrs later I've finally got the proper state architecture setup for multiple nested child states, and taking advantage of correct state view named views.
https://plnkr.co/edit/MztpsHj9qoRCFUDrREH7?p=preview
Full code
// Container module
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
container.config(function($stateProvider) {
const container = {
name: 'container',
url: '/container',
templateUrl: 'container-template.html',
controller: function($scope, $state) {
// console.log('CONTAINER STATE');
}
}
const dashboard = {
name: 'container.dashboard',
// deepStateRedirect: true,
// sticky: true,
views: {
'dashboard': {
template: '<dashboard-module></dashboard-module>'
},
'feed': {
templateUrl: 'feed-template.html',
controller: function($scope) {
// console.log('FEED STATE');
}
}
}
}
$stateProvider
.state(container)
.state(dashboard);
});
// Dashboard module
////////////////////////////////////////////////////////////////////////////////
var dashboard = angular.module('dashboard', [ 'ui.router' ])
dashboard.config(function($stateProvider) {
const dash_default = {
name: 'container.dashboard.default',
url: '/dashboard',
template: '<tickers-module></tickers-module>',
controller: function() {
// console.log(' DASHBOARD.DEFAULT STATE')
}
}
$stateProvider.state(dash_default);
})
dashboard.component('dashboardModule', {
templateUrl: 'dashboard-template.html',
controller: function($scope, $state) {
// console.log('DASHBOARD component');
}
});
// Tickers module
////////////////////////////////////////////////////////////////////////////////
var tickers = angular.module('tickers', ['ui.router'])
tickers.config(function($stateProvider) {
const tickers = {
// parent: 'dashboard',
name: 'container.dashboard.tickers',
url: '/tickers',
params: {
ticker: {}
},
views: {
'': {
templateUrl: 'tickers-template.html',
controller: function($scope, $state) {
// console.log(' TICKERS STATE', $state);
$scope.tickers = [
{ id: 1, ticker: 'AAPL' },
{ id: 2, ticker: 'GOOG' },
{ id: 3, ticker: 'TWTR' }
];
$scope.clickTicker = function(ticker) {
$state.go('container.dashboard.tickers.tags', { ticker: ticker });
}
}
}
}
}
$stateProvider.state(tickers);
})
tickers.component('tickersModule', {
templateUrl: 'tickers-template.html',
controller: function($scope, $state) {
// console.log('TICKERS component');
}
});
// Tags module
////////////////////////////////////////////////////////////////////////////////
var tags = angular.module('tags', ['ui.router'])
tags.config(function($stateProvider) {
const oldtags = {
name: 'tags',
url: '/tags',
params: {
ticker: {},
tag: {}
},
views: {
'view@tags': {
template: '<view-module ticker="$ctrl.ticker"></view-module>',
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;
}
}
}
}
const tags = {
name: 'container.dashboard.tickers.tags',
url: '/tags',
params: {
ticker: {},
tag: {}
},
views: {
'tags' : {
templateUrl: 'tags-list.html',
controller: function($scope, $state) {
console.log('tags-list controller', $state)
$scope.ticker = $state.params.ticker;
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('container.dashboard.tickers.tags', { tag: tag });
}
}
},
'view@tags': {
templateUrl: 'view-template.html',
controller: function($scope, $state) {
console.log('VIEWS STATE', $state);
$scope.ticker = $state.params.ticker;
$scope.term = $state.params.tag.term;
console.log(' $scope.ticker', $scope.ticker)
console.log(' $scope.term', $scope.term)
}
}
}
}
$stateProvider
.state(tags);
})
tags.component('tagsModule', {
templateUrl: 'tags-template.html',
controller: function($scope, $state) {
// console.log('TAGS component', $state.params);
}
});
// Activity module
////////////////////////////////////////////////////////////////////////////////
var activity = angular.module('activity', ['ui.router'])
// activity.component('activityModule', {
// templateUrl: 'activity-template.html',
// controller: function($scope, $state) {
// console.log('ACTIVITY component', $state.params);
// $scope.ticker = this.ticker;
// $scope.term = $state.params.tag.term;
// }
// });
// ViewHeader module
////////////////////////////////////////////////////////////////////////////////
var view = angular.module('view', ['ui.router'])
view.component('viewModule', {
templateUrl: 'view-template.html',
// bindings: {
// ticker: '<'
// },
controller: function($scope, $state) {
console.log('VIEW component', $state.params);
$scope.ticker = this.ticker;
$scope.term = $state.params.tag.term;
}
});
// Chart module
////////////////////////////////////////////////////////////////////////////////
var chart = angular.module('chart', ['ui.router'])
chart.component('chartModule', {
templateUrl: 'chart-template.html',
controller: function($scope, $state) {
// console.log('CHART component', $state.params);
$scope.term = $state.params.tag.term;
}
});
// Social module
////////////////////////////////////////////////////////////////////////////////
var social = angular.module('social', ['ui.router'])
social.component('socialModule', {
templateUrl: 'social-template.html',
controller: function($scope, $state) {
// console.log('SOCIAL component', $state.params);
$scope.term = $state.params.tag.term;
}
});
// TickersApp module
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp',
['ui.router',
'container',
'dashboard',
'tickers',
'tags',
'activity',
'view',
'chart',
'social']);
tickersApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
const login = {
name: 'login',
url: '/login',
templateUrl: 'login-template.html',
bindToController: true,
controllerAs: 'l',
controller: function($state) {
this.login = function() {
$state.go('container.dashboard.tickers', { });
}
}
}
$stateProvider
.state(login);
})
.run(['$rootScope', '$location', '$state',
function($rootScope, $location, $state) {
// $rootScope.$on("$stateChangeError", console.log.bind(console));
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams, options) {
// console.log(' ')
// console.log('toState', toState)
// console.log('state.current.name', $state.current.name)
// console.log('toParams', toParams)
// console.log('fromState', fromState)
// console.log('fromParams', fromParams)
// console.log('options', options)
});
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
// console.log('state.current.name', $state.current.name)
})
$rootScope.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams, error){
console.error('ERROR toState', toState)
console.error('ERROR fromState', fromState)
});
$rootScope.$on('$stateNotFound',
function(event, unfoundState, fromState, fromParams){
console.log('unfoundState.to', unfoundState.to); //"lazy.state"
// console.log('unfoundState.toParams', unfoundState.toParams); // {a:1, b:2}
// console.log('unfoundState.options', unfoundState.options); // {inherit:false} + default options
});
$rootScope.$on('$viewContentLoaded',
function(event){
// console.log('viewContentLoaded', event)
});
}]);
Post a Comment for "Module Sub Views Not Rendering In Ui-views Of Component Template"