1

我的应用程序的 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");
        }
    })

我的索引的 html ，我在其中加载了所有列表，并且我还想在该 ui 视图中显示我的详细视图...

...
<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 视图中定位它

.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>"
      } 
});
4

0 回答 0