$ 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>