$StateProvider Remove Child View Nesting

Question

I am new to angular ui routing . I am creating a sample application and want to display parent and child view separately . I mean when parent item gets selected child view will be displayed and parent view would be hidden . If I add ui-view to parent view it just renders the child view their but I want parent view to be completely replaced . So Can anyone please help me on this .

So here I want to achieve , when parent item gets selected child will replace content.

Plunkr Link

Answer 1

I'd suggest you to change structure of your HTML that will have ui-view="content" so we need to set content view from the views option of state.

Markup

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

Then you state would be change content of ui-view using @ relative routing

Config

$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

Well what you have is logical parent child relationship i.e. state is a child/sub-set of country.

However, in terms of angular, they are independent views, where view 1 shows list of countries and view 2 show list of states of 1 country. I will suggest, you to rethink again create 2 independent views.

Please find the updated plunker at http://plnkr.co/edit/OpDzbxjkWmnF5CMcMI1l?p=preview

Update your JS

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

And update your global.html (removed . before country in ui-sref)

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