angular UI 未显示路由器嵌套状态

Question

在我的应用程序中，我得到了来自在线服务的不同特许经营地点的概览。每个位置都有一个 link，通常应该进入新的嵌套状态。我的状态看起来是这样的，我也在使用 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

中的link

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

当我单击 link 时，我的 url 更改为正确的位置，但我不会转到状态的 templateUrl。

Answer 1

有a working plunker

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

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

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

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

而 child '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

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

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

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.

angular UI 未显示路由器嵌套状态

angular UI router nested state not shown

angularjs

angular-ui-router

View Names - Relative vs. Absolute Names