Angular.js子组件无法获取父组件变量，如何实现变量无缝注入？

你当前的硬编码写法高度依赖父级作用域层级，一旦上层组件结构调整就会失效，以下是3种可落地的无缝注入方案：

1. 组件显式绑定（官方推荐，适配绝大多数场景） #

在子组件定义时声明输入绑定规则，父组件调用时直接传值，不需要手动遍历作用域链取值。

• 子组件定义示例：

angular.module('yourApp').component('childComponent', {
  bindings: {
    // 单向绑定用<，双向绑定用=，事件回调用&，按需选择
    model: '<'
  },
  controller: function() {
    const vm = this
    vm.$onInit = function() {
      // 直接通过当前控制器的model属性取值，无需访问父作用域
      console.log(vm.model)
    }
  }
})

• 父组件模板调用示例：

<child-component model="$ctrl.model"></child-component>

2. 公共服务单例共享 #

如果数据需要跨多层组件、甚至非父子关系的组件共享，可以把数据存在公共服务中，所有需要访问的组件直接注入服务即可，完全不依赖作用域层级。

• 服务定义示例：

angular.module('yourApp').service('CommonDataService', function() {
  // 共享数据存在服务实例属性上
  this.sharedModel = {}
})

• 组件内使用示例：

// 父子组件都可以注入该服务直接读写数据
controller: function(CommonDataService) {
  const vm = this
  vm.model = CommonDataService.sharedModel
}

3. require继承父组件控制器 #

如果子组件固定作为某类父组件的内嵌组件使用，可以直接声明require规则引入父组件控制器，直接访问父组件的所有属性和方法。

• 子组件定义示例：

angular.module('yourApp').component('childComponent', {
  // ^表示从上层DOM树查找对应的父组件控制器
  require: {
    parentCtrl: '^parentComponent'
  },
  controller: function() {
    const vm = this
    vm.$onInit = function() {
      // 直接通过父控制器获取需要的变量
      vm.model = vm.parentCtrl.model
    }
  }
})

以上方案都可以完全替代$scope.$parent.$ctrl.model的硬编码写法，按需选择即可。

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