从angularjs隐藏父状态视图，最佳实践？

Question

'update-approved-product-campaign-ad'当我通过ui-sref父状态视图调用子状态时，这是'product-campaigns.product-campaign-detail'的子状态与子状态视图一起被调用我不想要。我只想要孩子状态视图。

Answer 1

据我所知它不可能只加载子视图。无论何时加载孩子的视图，其父母的视图也随之加载。

Answer 2

这可以使用视图定位完成。

假设你在根目录下有一个未命名的ui-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>" 
     } 
    } 
    }) 
}) 

，也可能与只是有一个嵌套的UI视图，它又将目标

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'/>" 
     }, 
     "child@parent.child": { 
     template: "<a ui-sref='^'>Back to parent</a><h1>child</h1>" 
     } 
    } 
    }) 
}) 

模板替换父视图

目标命名视图是“viewname @ statename”。命名视图“@”表示在（@）根状态（“”）处定位名为空字符串（“”）的视图。

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

Answer 3

我通过包装与<div ui-view="">

这父视图将覆盖ui-view与导航到一个孩子的状态，当孩子解决这个问题，否则将包含专利状态的看法。