如何在AngularJS 1.5中通过'='绑定向组件传入函数？

既然你没法修改comp1组件的代码，而它用的是bindings: { saveThing: '=' }这种双向绑定来接收函数，那我们只需要在它的父容器parentDirective里做好两件事就行：在父作用域/控制器里定义目标函数，然后通过组件属性把函数绑定传进去。

下面分两种常见情况给你具体代码示例：

情况1：parentDirective是传统指令（使用$scope） #

如果你的parentDirective是基于$scope的传统指令，那可以在它的控制器里定义函数，然后在模板里通过属性传递：

angular.module('main').directive('parentDirective', function() {
  return {
    scope: {}, // 根据你的实际需求调整scope配置
    controller: function($scope) {
      // 这里定义你要传入的saveThing函数
      $scope.saveThing = function(thingToSave) {
        // 替换成你的实际业务逻辑，比如调用后端API、处理数据等
        console.log('开始保存:', thingToSave);
        // 示例：$http.post('/api/save', thingToSave)...
      };
    },
    template: '<comp1 save-thing="saveThing"></comp1>'
  };
});

情况2：parentDirective是AngularJS 1.5+组件（使用controllerAs） #

如果parentDirective本身就是用component定义的（更符合1.5+的最佳实践），那就在它的控制器里用this绑定函数，模板里通过$ctrl引用：

angular.module('main').component('parentDirective', {
  controller: function() {
    const ctrl = this;
    
    // 定义要传入的saveThing函数
    ctrl.saveThing = function(thingToSave) {
      // 你的业务逻辑在这里实现
      console.log('保存操作执行:', thingToSave);
      // 比如处理数据后调用服务
    };
  },
  template: '<comp1 save-thing="$ctrl.saveThing"></comp1>'
});

为什么这样可行？ #

组件里的saveThing: '='绑定会建立父作用域和组件内部的双向绑定，但对于函数来说，本质上是传递了函数的引用。当comp1组件内部调用this.saveThing(...)时，实际执行的就是你在parentDirective里定义的函数逻辑，完全不需要修改comp1的代码。

需要注意的是：虽然用的是双向绑定，但只要组件内部只是调用这个函数而不是重新赋值，就不会有双向绑定带来的额外问题，完全符合你的使用场景。

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