$StateProvider 移除子视图嵌套

Question

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

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

Plunkr Link

Answer 1

好吧，您拥有的是合乎逻辑的父子关系，即州是 child/sub-set 国家/地区。

但是，就angular而言，它们是独立的视图，其中视图1显示国家列表，视图2显示1个国家的州列表。我会建议，你重新考虑再创建2个独立的视图。

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

找到更新的插件

更新你的 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

我建议您更改 HTML 的结构，它将具有 ui-view="content"，因此我们需要从状态的 views 选项设置 content 视图。

标记

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

那么你的状态将是content of ui-view using @ relative routing

配置

$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 移除子视图嵌套

$StateProvider Remove Child View Nesting

routing

angularjs

angular-routing

angular-ui-router