$ StateProvider删除子视图嵌套

Question

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

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

Plunkr Link

Answer 1

我D建议你改变你的HTML的结构将有ui-view="content"，所以我们需要设置content视图从views opti状态。

标记

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

然后，你的状态会使用@相对变化ui-viewcontent路由

配置

$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

Answer 2

那么你有什么是合乎逻辑的父子关系，即国家是一个孩子/子集的国家。

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

请找到更新的plunker在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>