角度 UI 路由器嵌套状态未显示

Question

在我的应用程序中，我概述了来自在线服务的不同特许经营地点。每个位置都有一个链接，通常应该进入一个新的嵌套状态。我的状态是这样的，我也在使用resolve，这样我就可以通过id来搜索位置了。

        .state('locations', {
            url: "/locations",
            controller: "FranchiseCtrl",
            templateUrl: "partials/locations.html"
        })
        .state('locations.location', {
            params: {
                locationId : "defaultID", 
                locationName: "defaultName"
            },
            url: "/:locationName",
            controller: "LocationCtrl",
            templateUrl: "partials/location.html",
            resolve:   {
                loc:  function($http, $stateParams) {
                    var url = "url/to/service/" + $stateParams.locationId + "/en";
                    return $http.get(url)
                        .then(function(res){ return res.data; });
                }
            }
        })

这是locations.html中的链接

<a ui-sref="locations.location({ locationId: location.id, locationName: location.name })">Go to location</a>

当我点击链接时，我的 url 会更改为正确的位置，但我不会转到该状态的 templateUrl。

Answer 1

有a working plunker

在这种情况下，我们经常忘记为孩子创建目标。换句话说，父状态模板templateUrl: "partials/locations.html" 应该包含

<div ui-view=""></div>

所以在 plunker 中我们可以看到父 'partials/locations.html' 模板：

<div>
  <h2>parent</h2>
  
  <hr />
  
  <div ui-view=""></div> // this is the key to show child
  
</div>

而孩子'partials/location.html' 可以是例如：

<div>
  <h3>current state name: <var>{{$state.current.name}}</var>  
</div>

查看here

如果我们想定位 index.html ui-view=""，我们必须使用绝对命名。检查adjusted plunker here

.state('locations.location', {
    params: {
        locationId : "defaultID", 
        locationName: "defaultName"
    },
    url: "/:locationName",
    views: {
      '@' : {
        controller: "LocationCtrl",
        templateUrl: "partials/location.html",
            resolve:   {
            loc:  function($http, $stateParams) {
                var url = "url/to/service/" + $stateParams.locationId + "/en";
                return $http.get(url)
                    .then(function(res){ return res.data; });
            }
      }
    }

查看here

文档和解释：

View Names - Relative vs. Absolute Names

在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式。项目。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

请注意，视图名称现在指定为绝对名称，而不是相对名称。它的目标是位于根未命名模板中的“filters”、“tabledata”和“graph”视图。由于它未命名，因此“@”后面没有任何内容。未命名的根模板是您的 index.html。