AngularJS：孩子的状态回归父视图 [英] AngularJS : child state return parent view

问题描述

我使用angularJs与ES6。为此每个视图都是模块。

模块项目：

 让projectModule = angular.module（'项目'，[
  uiRouter
]）的.config（函数（$ stateProvider，$ urlMatcherFactoryProvider）{  $ stateProvider
    .STATE（'项目'，{
      网址：'/项目/：产地/：业主/：名称'，
      模板：'＆LT;项目＆GT;＆LT; /项目＆GT;，
      数据：{PAGETITLE：项目}，
    }）;}）.component（'项目'，projectComponent）.factory（'$ projectResource'，服务）;
 

模块警报（它的状态是项目状态的孩子）：

 让alertsModule = angular.module（'报警'，[
  uiRouter
]）的.config（（$ stateProvider）=＆GT; {  $ stateProvider
    .STATE（'project.alerts'，{
      网址：'/警报，
      模板：'＆LT;提醒和GT;＆LT; /警报＆GT;，
      数据：{PAGETITLE：提醒}
    }）;}）.component（'报警'，alertsComponent）;
 

所有视图由组件管理，在其相关的状态定义的模板属性显示。

 ＆LT;提醒和GT;＆LT; /警报＆GT;
 

组件被定义为这样的：

 从./alerts.html'导入模板;
从./alerts.controller'进口控制器;
进口'./alerts.scss';让alertsComponent = {  限制：'E'，
  模板：模板，
  控制器：控制器，
  controllerAs：虚拟机，
  绑定：真};出口默认alertsComponent;
 

查看被称为这种方式：

 ＆LT;一个UI的SREF =project.alerts（{产地：project.origin，店主：project.owner.name，名称：project.name}）＆GT;警报和LT ; / A＆GT;
 

或者，如果我已经在我的项目，方式：

 ＆LT;一个UI的SREF =project.alerts＆GT;警报＆LT; / A＆GT;
 

两者的href能正确显示：

  

/项目/ github上/ btribouillet / btproject /提示

但我seing的父视图：

 ＆LT;项目＆GT;＆LT; /项目＆GT;
 

虽然它应该是：

 ＆LT;提醒和GT;＆LT; /警报＆GT;
 

我究竟做错了什么？到现在的解决方案是从每个人都有独立的国家。但我试图建立一个面包屑模块​​和我想能够访问父状态。如果状态是独立于彼此，这是不可能的。

更新：

我的主要观点是app.html：

 ＆LT;！ - 广场旨在成为横跨在此文件中的所有路由present所有UI元素 - ＆GT;
＆LT; D​​IV CLASS =站点包装＆GT;
  ＆LT;＆导航栏中GT;＆LT; /导航栏＆GT;
  ＆LT; D​​IV CLASS =查看UI-视图＆gt;＆LT; / DIV＆GT;
  ＆LT; navfooter＆GT;＆LT; / navfooter＆GT;
＆LT; / DIV＆GT;
 

解决方案

您忘了在用户界面视图指令在你的工程的组成部分HTML，所以孩子的状态都没有发生在加载。

I'm using angularJs with ES6. Therefor each view are modules.

Module project :

let projectModule = angular.module('project', [
  uiRouter
])

.config(function($stateProvider, $urlMatcherFactoryProvider) {

  $stateProvider
    .state('project', {
      url: '/projects/:origin/:owner/:name',
      template: '<project></project>',
      data : { pageTitle: 'Project' },
    });

})

.component('project', projectComponent)

.factory('$projectResource', service);

Module alerts (its state is a child of project state) :

let alertsModule = angular.module('alerts', [
  uiRouter
])

.config(($stateProvider) => {

  $stateProvider
    .state('project.alerts', {
      url: '/alerts',
      template: '<alerts></alerts>',
      data : { pageTitle: 'Alerts' }
    });

})

.component('alerts', alertsComponent);

All views are managed by the components and displayed from the defined template attribute in its related state.

<alerts></alerts>

Components are defined as such :

import template from './alerts.html';
import controller from './alerts.controller';
import './alerts.scss';

let alertsComponent = {

  restrict: 'E',
  template: template,
  controller: controller,
  controllerAs: 'vm',
  bindings: true

};

export default alertsComponent;

View is called that way :

<a ui-sref="project.alerts({ origin: project.origin, owner: project.owner.name, name: project.name })">Alerts</a>

Or that way if i'm already in project :

<a ui-sref="project.alerts">Alerts</a>

Both href are correctly displaying :

/projects/github/btribouillet/btproject/alerts

But i'm seing the the parent view :

<project></project>

While it should be :

<alerts></alerts>

What am i doing wrong? The solution until now was to have independent state from each others. But i'm trying to build a breadcrumb module and i'd like to be able to access to parent states. If states are independent from each others, this is not possible.

Update:

My main view is app.html :

<!-- Place all UI elements intended to be present across all routes in this file -->
<div class="site-wrapper">
  <navbar></navbar>
  <div class="view" ui-view></div>
  <navfooter></navfooter>
</div>

解决方案

You forgot to put a ui-view directive in your "project" component html, so child state have no place to load in.

这篇关于AngularJS：孩子的状态回归父视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！