模块子视图未在组件模板的 ui 视图中呈现

Question

完整的 Plnkr 代码：https://plnkr.co/edit/5A5YFEWZ7ZTzRJloxgka?p=preview

预期

• 标签标题子视图的模板应呈现在标签列表中。
• 标签计数器子视图模板应呈现在标签列表中
• 当点击 Count it Tickers 列表时，标签计数器编号应更新。

结果

• 标签状态子视图均未呈现

标签模块、状态配置和组件：

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) {

  }
})

标签模块模板.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>

Answer 1

我对你的 plunker 做了一些改动。 Here 是更新的。

我改的代码在app.js中如下：

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

请注意，我将 counter 作为参数传递给标签 url。

我正在使用stateParams 服务将计数器值传递给控制器​​。一旦单击计数，您就会开始在嵌套标签视图中看到值。根据需要，当按下计数按钮时，标签计数器值会更新。

Answer 2

之所以添加这个答案，是因为后来有几个问题和分叉的 plnkrs，我终于为多个嵌套子状态设置了正确的状态架构，并利用了正确的状态视图命名视图。

https://plnkr.co/edit/MztpsHj9qoRCFUDrREH7?p=preview

完整代码

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