angular-ui-router - スコープ継承のための UI ルーターのネストされたビュー

Question

UI ルーターのネストされたビューでネストされたビューを理解するのに問題があります...より具体的には、それらがどのように見えるか...?

$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>