Angularjs.在不同抽象父母的子女之间过渡时，模板不包括在UI观看中

Question

模板在不同抽象父母的子女之间过渡时不包括在UI视图中。

。

这是Plunker，链接到编辑器。导航表单登录（auth.login）状态到仪表板（app.dashboard）状态，标题和页脚模板不包括在UI-Views中。

$ state -provider的示例：

  .state('auth', {
    abstract: true,
    views: {
      'app-outer': {
        templateUrl: 'auth.html'
      }
    }
  })
  .state('auth.login', {
    url: '/login',
    views: {
      'app-inner': {
        templateUrl: 'login.html'
      }
    }
  })
  .state('app', {
    abstract: true,
    views: {
      'header': {
        templateUrl: 'header.html'
      },
      'app-outer': {
        templateUrl: 'app.html'
      },
      'footer': {
        templateUrl: 'footer.html'
      }
    }
  })
  .state('app.dashboard', {
    url: '/dashboard',
    views: {
      'app-inner': {
        templateUrl: 'dashboard.html'
      }
    }
  });

我尝试在ui-sref-opts中传递{reload：true}，并使用$ state.go（）方法{reload：true}。

作为临时解决方案，我添加了header@app，footer@app等。但是，不要到处重复此事会很高兴。

  'header@app': {
    templateUrl: 'header.html'
  },
  'app-inner': {
    templateUrl: 'dashboard.html'
  },
  'footer@app': {
    templateUrl: 'header.html'
  }

Answer 1

您的模板index.html中有app-outer视图。app.html中有header，app-inner和footer。但是，您将header和footer作为APP状态的视图，与index.html相对应。看起来它尝试在父态首次处于活动状态时（在子女状态（使用app.html）加载之前）尝试填充这些模板，因此它找不到标头和页脚状态的UI-Views。

换句话说，它看起来像是与视图相对应的ui-view元素必须在定义视图变得活跃的状态时存在。

请参阅此plnkr，它插入另一个包装状态。