AngularJS UI-Router 父级答案

【问题标题】：AngularJS UI-Router parentAngularJS UI-Router 父级
【发布时间】：2018-07-12 06:43:18
【问题描述】：

我在我的一个项目中使用 UI-Router，我刚刚注意到，当我重新加载子状态时，父控制器也（再次）与子控制器一起运行。父级的作用域由子级继承。这应该像这样工作吗？我可以隔离子范围吗？

我需要父/子关系才能使面包屑起作用。

app.config(function($stateProvider, $urlRouterProvider) {
	$stateProvider
	.state('parent', {
		name: 'parent',
		url: '/parent',
		templateUrl: 'parent-template.html',
		controller: 'parentController',  		
	})
	.state('child', {
		name: 'child',
		parent: 'parent',
		url: '/child',
		templateUrl: 'child-template.html',
		controller: 'childController',
	})
	.state('orphan', {
		name: 'orphan',
		url: '/orphan',
		templateUrl: 'orphan-template.html',
		controller: 'orphanController',
	});
	// if no route is matching
	$urlRouterProvider.otherwise('/parent');
});

<!-- INDEX.HTML -->
<body>
    <div ng-app="app">
      <main role="main" class="container">
        <div ng-app="app">
          <ui-view></ui-view>
        </div>
      </main>
    </div>
</body

<!-- PARENT-TEMPLATE.HTML -->
<ui-view>
	<div class="container">
		parent content
	</div>
</ui-view>

<!-- CHILD-TEMPLATE.HTML -->
<ui-view>
	<div class="container">
		child content
	</div>
</ui-view>

<!-- ORPHAN-TEMPLATE.HTML -->
<div class="container">
	Orphan Content
</div>

【问题讨论】：

我意识到这是 AngularJS 的作用域继承，因为 UI-Router 将子级嵌套在父级中...

标签： javascript angularjs angular-ui-router

【解决方案1】：

控制器被实例化，因为视图正在显示。尝试使用命名视图：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

UI-ROuter 是一个功能强大的工具，有很多很棒的选项，但 “强大的力量带来了巨大的责任” 根据我自己的经验，它的所有选项让我失去了很多时间来测试和理解。最后，最好的（但不是最简单的）是尽可能简单地使用它。

【讨论】：

“UI-Router 允许在单个状态下定义多个视图”，不幸的是不是这样。我的州每个州只包含一个视图。
看看这个 pluncker：plnkr.co/edit/xHFLyZ1wSk33puZ46vnA。如果 DOM 保持继承，则子级继承到父级范围，如果在父子级状态上使用命名视图，则您可能会违反此规则。