Question

我是角度ui路由的新手。我正在创建一个示例应用程序，并希望单独显示父视图和子视图。我的意思是当父项被选中时，将显示子视图并隐藏父视图。如果我将ui-view添加到父视图，它只是呈现子视图，但我希望完全替换父视图。所以任何人都可以帮助我。

所以我想在这里实现，当父项被选中时，child将替换内容。

Plunkr Link

Answer 1

你所拥有的是合乎逻辑的父母子女关系，即国家是国家的子/子集。

然而，就角度而言，它们是独立的视图，其中视图1显示国家列表，视图2显示1个国家的州列表。我建议你再次重新考虑创建2个独立的观点。

请在http://plnkr.co/edit/OpDzbxjkWmnF5CMcMI1l?p=preview

找到更新的plunker

更新你的JS

.state('country', {
    url: '/country/:name',
    templateUrl: "country.html",
    controller: function ($scope) {
        $scope.states = [...];
    }
})

并更新您的global.html（在ui-sref中删除。之前的国家/地区）

<td><a ui-sref="country({name:country.name})">{{country.name}}</a></td>

Answer 2

我建议您更改包含ui-view="content"的HTML结构，以便我们需要从州content选项设置views视图。

<强>标记

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

然后，您使用content相对路由

来声明ui-view的更改@

<强>配置

$stateProvider
.state('global', {
  url: '/global',
  views: {
    'content@': {
      templateUrl: "global.html",
      controller: function($scope) {
        $scope.countries = [{ name: 'Country 1', value: 100 }, { name: 'Country 2', value: 200 }, { name: 'Country 3', value: 300 }, { name: 'Country 4', value: 400 }];
      }
    }
  }
})
.state('global.country', {
  url: '/:name',
  views: {
    'content@': {
      templateUrl: "country.html",
      controller: function($scope) {
        $scope.states = [{ name: 'State 1', value: 100 }, { name: 'State 2', value: 200 }, { name: 'State 3', value: 300 }, { name: 'State 4', value: 400 }];
      }
    }
  }
});

Demo Plunkr

$ StateProvider删除子视图嵌套

2 个答案: