Question

在我的申请中，我概述了来自在线服务的不同特许经营地点。每个位置都有一个链接，通常应该进入新的嵌套状态。我的状态看起来像这样，我也使用了解决方案，以便我可以通过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>

当我点击链接时，我的网址会更改为正确的位置，但我不会转到状态的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是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

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

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

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

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

1 个答案:

View Names - Relative vs. Absolute Names