Angularjs $StateProvider删除子视图嵌套

我不熟悉角度ui路由。我正在创建一个示例应用程序，希望分别显示父视图和子视图。我的意思是当父项被选中时，子视图将被显示，父视图将被隐藏。如果我向父视图添加

ui视图

，它只会呈现子视图，但我希望父视图被完全替换。谁能帮我一下吗

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

---

好吧，你所拥有的是合乎逻辑的父子关系，即国家是国家的一个子集

然而，就角度而言，它们是独立视图，其中视图1显示国家列表，视图2显示1个国家的国家列表。我会建议你重新思考，创建两个独立的视图

请在找到更新的plunker

更新你的JS

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

并更新您的global.html（在ui sref中删除.before country）

{{country.name}

我建议您更改HTML的结构，它将具有

ui view=“content”

，因此我们需要从状态的

视图

选项中设置

内容

视图

标记

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

---

Plnkr链接用于相同的：谢谢。Pankaj还提出了一个好主意，我们也可以用角码来控制卷绕well@Deb很高兴帮助你……谢谢：）

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

$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 }];
      }
    }
  }
});