角度UI路由器：可以讓第一個孩子留空嗎？ 還是隱藏？

Question

我想使用UI路由器創建一個嵌套視圖，這是我之前完成的（參見圖片），其中包含一個主要部分，然后是一個將子部分加載到嵌套UI-View中的導航。 我可以做到，沒有問題。

我的問題是：這次，我需要讓初始子狀態不顯示給用戶，除非單擊按鈕，如下所示：

我可以這樣做嗎？ 還是加載“棒球”視圖但用ng-hide隱藏它和導航更好？

更新

有人問我在這種情況下如何處理簡單的嵌套狀態：

    (function() {

  'use strict';

  angular.module('elements').config(function($stateProvider) {
    $stateProvider.state('elements', {
      url: '/elements',
      abstract: true,
      templateUrl: 'modules/elements/templates/elements.html',
      controller: 'ElementsController as elements'
    })

    .state('elements.buttons', {
      url: '/elements/buttons',
      templateUrl: 'modules/elements/templates/elements-buttons.html'
    })

    .state('elements.accordion', {
      url: '/elements/accordion',
      templateUrl: 'modules/elements/templates/elements-accordion.html',
      controller: 'AccordionController as accordion'
    })

    .state('elements.colorcharts', {
      url: '/elements/colorcharts',
      templateUrl: 'modules/elements/templates/elements-colors-charts.html',
      controller: 'ChartColorsController as charts'
    })

    .state('elements.grid', {
      url: '/elements/grid',
      templateUrl: 'modules/elements/templates/elements-grid.html'
    });

  });

})();

Answer 1

是的，這絕對有可能。 我通常通過使用編程定義的狀態來完成此操作，看起來它應該適合您的情況。

如果您有一個棒球州，那么您可以這樣控制它：

狀態配置

.state('baseball', {
  url: '/views/baseball',
  template: 'imabaseball!'
})

html

<div ui-view="{{state}}">
<button ng-click="state = 'baseball'">Show Baseball</button>

然后，只有在用戶單擊按鈕后，才會渲染有問題的視圖