从angularjs中的子状态视图隐藏父状态视图,最佳实践？

Question

'update-approved-product-campaign-ad'这是'product-campaigns.product-campaign-detail'的子状态,当我通过ui-sref调用子状态时父状态视图被调用以及子状态视图不想要.我只想要儿童国家观点.

Answer 1

我通过包装父视图解决了这个问题 <div ui-view="">

这将ui-view在导航到子状态时覆盖子项,否则它将包含专利状态的视图.

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-view的模板替换父视图,而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: "<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

据我所知，不可能只加载子视图。每当加载子视图时，其父视图也会随之加载。