Hiding parent state view from child state view in angularjs, best practices?

Question

'update-approved-product-campaign-ad' this is the child state of 'product-campaigns.product-campaign-detail' when i call child state through ui-sref parent state view gets called along with child state view which i don't want. I want only child state view.

Answer 1

As far as i know its not possible to load only the child view. Whenever a childs view is loaded, its parents' view is loaded too alongwith it.

Answer 2

This can be done using view targeting.

Say you have an unnamed ui-view for the parent at the root. When the child is activated, it can take over the parent's unnamed view using targeted views. The child view can put its own content directly into the parent's view:

var app = angular.module("plunker", ['ui.router'])
app.config(function($stateProvider) {
  $stateProvider.state('parent', {
    url: "",
    template: "<a ui-sref='.child'>Go to child</a><h1>Parent</h1>"
  }).state('parent.child', {
    url: '/child',
    views: {
      "@": {
        template: "<a ui-sref='^'>Back to parent</a><h1>child</h1>"
      }
    }
  })
})

or it could replace the parent view with a template that just has a nested ui-view, which it in turn targets

var app = angular.module("plunker", ['ui.router'])
app.config(function($stateProvider) {
  $stateProvider.state('parent', {
    url: "",
    template: "<a ui-sref='.child'>Go to child</a><h1>Parent</h1>"
  }).state('parent.child', {
    url: '/child',
    views: {
      "@": {
        template: "<small>parent ui-view overridden by parent.child</small> <div ui-view='child'/>"
      },
      "[email protected]": {
        template: "<a ui-sref='^'>Back to parent</a><h1>child</h1>"
      }
    }
  })
})

Targeted named views are "viewname@statename". The named view "@" means target the view named empty string ("") at (@) the root state ("").

http://plnkr.co/edit/iff63xbNWCbK9MEPMb4f?p=preview

Answer 3

i solved this issue by wrapping the parent view with <div ui-view="">

This will override the ui-view with the child when navigating to a child state, otherwise it will contain the patent state's view.