Angular路由中如何为同一视图添加两个控制器

你之前的写法出错是因为JavaScript对象中重复的属性键会被后面的覆盖——你写了两个controller属性，最终只有controller2会生效，这就导致了异常。下面给你几种在Angular（看起来你用的是ui-router路由框架）中给同一视图添加多个控制器的可行方案：

方案1：在路由配置中直接指定多个控制器 #

ui-router支持在controller属性中传入一个包含多个控制器的数组，或者用字符串形式同时声明控制器及对应的controllerAs别名：

数组形式（适合不需要单独指定别名的情况） #

var profile = { 
  name: "web.profile", 
  parent: "web", 
  url: "/profile", 
  title: "Profile", 
  controller: ['controller1', 'controller2'],
  controllerAs: 'profile' // 此别名会应用到所有控制器（如果不需要单独别名可以用这个）
};

字符串形式（支持单独指定每个控制器的别名） #

如果你想给每个控制器设置不同的别名，用逗号分隔即可：

var profile = { 
  name: "web.profile", 
  parent: "web", 
  url: "/profile", 
  title: "Profile", 
  controller: 'controller1 as profile, controller2 as ctrl2'
};

这样在视图中你可以分别用profile和ctrl2来访问两个控制器的属性和方法。

方案2：在视图模板中通过ng-controller添加第二个控制器 #

如果第二个控制器只需要作用在视图的某一部分，这种方法更灵活，也能让作用域划分更清晰：

1. 路由配置中只保留第一个控制器：

var profile = { 
  name: "web.profile", 
  parent: "web", 
  url: "/profile", 
  title: "Profile", 
  controller: 'controller1', 
  controllerAs: 'profile' 
};

2. 在对应的视图模板中，用ng-controller指令包裹需要第二个控制器作用的区域：

<!-- 整个视图受controller1控制 -->
<div>
  <p>{{profile.someProperty}}</p>
  
  <!-- 这个区域额外受controller2控制 -->
  <div ng-controller="controller2 as ctrl2">
    <p>{{ctrl2.anotherProperty}}</p>
  </div>
</div>

注意事项 #

• 永远不要在JavaScript对象中重复定义同一个属性键，这是基础语法规则，重复的键会被最后一次赋值覆盖，这也是你最初写法出错的核心原因。
• 如果使用方案1的数组形式，所有控制器会共享同一个controllerAs别名（如果你指定了的话），所以要注意避免两个控制器中的属性名冲突。

内容的提问来源于stack exchange，提问作者bambuTR