Module sub views not rendering in ui-views of component template

Question

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 template should render in the Tags list
The Tags counter number should update when the Count it Tickers list is clicked.

Results

None of the Tags state sub views render

The Tags module, state config and component:

var tags = angular.module('tags', ['ui.router'])

tags.config(function($stateProvider) {

  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    views: {
      '' : { template: '<p>Hi this is Tags</p>' },
      'title@tags' : { template: '<p>Tags Title!</p>' },
      'counter@tags': {
        template: '<p class="counter">{{ counter }}</p>',
        params: {
          counter: 0
        },
        bindToController: true,
        controller: function($scope, $state) {
          console.log('tags state object', $state)
          $scope.counter = $state.params.counter;
        }
      }
    }
  }

  $stateProvider.state(tags);

})

tags.component('tagsModule', {
  templateUrl: 'tags-module-template.html',
  controller: function($scope, $state) {

  }
})

The tags-module-template.html

<div class="jumbotron text-center">
  <h2>Tags list</h2>

  <div class="row">
    <div class="col-sm-3">
        Tags title here:
        <div ui-view="title"></div>
    </div>

    <div class="col-sm-3">
      Tags counter here:
      <div ui-view="counter"></div>
    </div>
  </div>

</div>

clever_bassi · Accepted Answer · 2017-03-16T18:22:03.767

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.

edited Mar 16 '17 at 18:22

answered Mar 16 '17 at 18:16

clever_bassi

2,392
2
24
43

Thanks, also getting rid of the `@` symbol helped – Leon Gaban Mar 16 '17 at 18:54
Yeah I don't have that in my code. I believe u updated it later? – clever_bassi Mar 16 '17 at 19:26
Like to win more internet points? :D http://stackoverflow.com/questions/42843145/sub-view-for-state-not-rendering-in-named-ui-view – Leon Gaban Mar 16 '17 at 19:27
1

Let me take a look at your question, will try to help! – clever_bassi Mar 16 '17 at 19:29
1

Fixed your other plunker. hope it helps – clever_bassi Mar 16 '17 at 19:48
Thanks! Btw hopefully 1 last question then I can fix my real app :) http://stackoverflow.com/questions/42844302/how-to-prevent-specific-state-from-refreshing-when-another-state-updates if you have time! – Leon Gaban Mar 16 '17 at 20:36

score 0 · Answer 2 · answered Mar 24 '17 at 14:05

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)
      });
}]);

Module sub views not rendering in ui-views of component template

Expected

Results

2 Answers2

Linked