Question

＆＃39;更新批准的产品广告活动的广告＆＃39;这是“产品 - 广告系列”的子级状态。产品广告系列 - 详细信息＆＃39;当我通过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>"
      }
    }
  })
})

目标命名视图是＆＃34; viewname @ statename＆＃34;。命名视图＆＃34; @＆＃34;意味着在（@）根状态（＆＃34;＆＃34;）上定位名为空字符串（＆＃34;＆＃34;）的视图。

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

Answer 3

据我所知，只能加载子视图。每当孩子的视图被加载时，其父母的父母就会被加载。视图也随之加载。

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

3 个答案: