UI Router嵌套視圖以實現作用域繼承

Question

我在理解UI Router嵌套視圖中的嵌套視圖時遇到了麻煩...更具體地說，它們是什么樣子...？

我需要了解它，因為我需要繼承我的$ scope屬性。

我在文檔中看到了這個例子

$stateProvider
.state('contacts', {
    abstract: true,
    url: '/contacts',
    templateUrl: 'contacts.html',
    controller: function($scope){
        $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
    }           
})
.state('contacts.list', {
    url: '/list',
    templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
    url: '/:id',
    templateUrl: 'contacts.detail.html',
    controller: function($scope, $stateParams){
      $scope.person = $scope.contacts[$stateParams.id];
    }
})

然后我在文檔中看到了類似的內容

   $stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      }
    }
  })

這讓我有些困惑，由於我需要$ scope繼承，因此我需要嵌套視圖-只是不太確定它是哪個示例。

更新這是我的狀態

$locationProvider.html5Mode(false);
    $stateProvider
        .state('search', {
        abstract: true,
        url: '/search',
        controller: 'searchCtrl',
        controllerAs: 'vm',
        templateUrl: 'search/index.html'    
    })
      .state('search.query', {
        url: '/',
        controller: 'searchCtrl',
        controllerAs: 'vm',
        templateUrl: 'search/query.html'
      })
        .state('search.results', {
        url: '/?q',//for query parameter in url
        controller: 'searchCtrl',
        controllerAs: 'vm',
        templateUrl: 'search/results.html'
      });
$urlRouterProvider.otherwise('/');

我要達到的目的只是在query.html上創建一個簡單的搜索表單，一旦用戶輸入或選擇了一個搜索詞，它就會與另一個搜索表單和結果一起進入search.html。

這些是我的模板，我相信我已經正確設置了它們，但是出了些問題，因為什么都沒有顯示。

/app/index.html
<div ui-view></div>


/app/search/index.html
<div ui-view></div>


/app/search/query.html
<form>
...
</form>

/app/search/results.html
<div ui-view></div>
<div>
...
</div>

Answer 1

第一個例子是一個嵌套狀態的示例，它滿足您繼承范圍對象的要求。 例如，state / sub-state-a，state / sub-state-b從文檔中獲取的第一個代碼片段上方的注釋為：

顯示前置的url，插入的模板，配對的控制器和繼承的$ scope對象。

第二個示例是一個嵌套視圖，您可以在其中為每個狀態定義多個視圖，並根據用例使用每個視圖。 從文檔：

然后，視圖中的每個視圖都可以設置自己的模板（template，templateUrl，templateProvider），控制器（controller，controllerProvider）。