AngularJS UI-路由器父级

Question

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

我需要 parent/child 关系才能让面包屑导航发挥作用。

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>

Answer 1

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

UI-ROuter 是一个强大的工具，有很多很棒的选项，但 "great power comes great responsibility" 根据我自己的经验，它的所有选项让我失去了很多时间，去检验和理解。最后最好的（但不是最简单的）是尽可能简单地使用它。

AngularJS UI-路由器父级

AngularJS UI-Router parent

javascript

angularjs

angular-ui-router