angularjs - angularjs ネストされた詳細ビューが表示されない

Question

私のアプリのstateProviderにはネストされたビュー（base.gallery -> base.gallery.detail）があり、ギャラリー内のリンクをクリックすると詳細ビューが表示されるはずですが、表示されません...

リンクは私にとっては良さそうですが、ブラウザのURLを変更するだけで、onEnter関数から「表示される」とログに記録されますが、テンプレートは表示されません( "modules/album/detail/view/detail.html ") 私の ui ビューで...

例: 私のリンク<a ui-sref="base.photos.detail(params(item.id))" class="list-item-link" href="/gallery/21/detail/457">

   .state("base", {
        abstract: true,
        templateUrl: 'modules/base/views/base.html',
        controller: function($scope, navigationData){
            $scope.navigation.data = navigationData;
         },

        resolve:{
            navigationData:function(navigationSvc){
                var response = navigationSvc;
                return response;
            }
        }
    })
    .state("base.categories", {
        url: "/categories",
        templateUrl: "modules/album/list/view/list.html",
        controller: function($scope, data){
            $scope.settings.data = data;
            $scope.settings.type = "categories";
         },
        resolve:{
            data:function(listSvc){
                var response = listSvc.load("categories");
                return response;
            }
        }
    })
    .state("base.category", {
        url: "/category/:id",
        templateUrl: "modules/album/list/view/list.html",
        controller: function($scope, data){
            $scope.settings.data = data;
            $scope.settings.type = "galleries";         
         },
        resolve:{
            data:function($stateParams, listSvc){
                var response = listSvc.load("category/"+$stateParams.id);
                return response;
            }
        },
    })
.state("base.gallery", {
        url: "/gallery/:id",
        templateUrl: "modules/album/list/view/list.html",
        controller: function($scope, data, $stateParams){
            $scope.settings.data = data;
            $scope.settings.type = "photos";
         },
        resolve:{
            data:function($stateParams, listSvc){
                var response = listSvc.load("gallery/"+$stateParams.id);
                return response;
            }
        }
    })

    .state("base.gallery.detail", {
        url: "/detail/:photo_id",
        templateUrl: "modules/album/detail/view/detail.html",
        controller: function($scope, $stateParams){
            console.log("doesn't get displayed ");
            $scope.settings.type = "photo";
        },

        onEnter: function(){
            console.log("get displayed");
        }
    })

すべてのリストをロードし、その ui-view 内に詳細ビューを表示したいインデックスの html...

...
<div class="content" ui-view></div>
...

私のリストビューのhtml

<li class="list-item" ng-repeat="item in list.data">
    <a ui-sref="{{state}}(params(item.id))" class="list-item-link">item.title</a>
</li>

アップデート

ki わかりました ;) ビューが必要で、@ を使用して、index.html の同じ ui-view でそれをターゲットにします

.state("base.gallery.detail", {
    url: "/detail/:photo_id",
    views:{
      "@" : {
        controller: function($scope, $stateParams, listSvc){
          $scope.settings = {};
          $scope.settings.type = "photos";
          $scope.photo = listSvc.data[$stateParams.id_photo-1];
          console.log($stateParams);
        },
        template: "<h2>detail</2><div>{{photo.title}}</div>"
      } 
});