AngularJS UI-router How To Load A State View Into Another Nested View Of A Top Level State?

https://plnkr.co/edit/XnDUIqfVuBS2Hr2N1ooy?p=preview I have a top level state called container which holds the named views dashboard and feed. Inside of the dashboard view templat

Solution 1:

Still waiting on more answers, but I got this working so far by using a tickers.component inside of the dashboard-template.html

https://plnkr.co/edit/6dLIk1vq6M1Dsgy8Y4Zk?p=preview

<div class="dashboard-state">
  <div class="fl w100">
    <em>Dashbaord state</em>  
  </div>

  <!--<div ui-view="tickers"></div>-->
  <tickers-module></tickers-module>
</div>

---

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

Solution 2:

I think you should use different states on the container like these:

$stateProvider .state('container', { url: '/container', templateUrl: '' })

    .state('container.feed', {
        url: '/container/feed',
        templateUrl: 'partial-home.html'
    })

    .state('container.dashboard', {
        url: '/container,
        templateUrl: 'partial-home.html'
    })

And use ui-sref