AngularJS Ionic v1：如何在一个指令内调用另一个指令的函数

在AngularJS/Ionic v1里，指令因为作用域隔离的特性，默认没法直接跨指令调用方法，不过咱们有好几种靠谱的解决办法，我给你拆解下，你可以根据自己的场景选最合适的：

方案1：使用AngularJS事件系统（$broadcast/$emit） #

这种方法适合指令之间没有直接嵌套关系、或者不想互相耦合的场景，通过自定义事件来传递触发信号，有点像“发通知”的逻辑。

指令1修改：监听自定义事件 #

给指令1添加一个事件监听器，当收到指定事件时执行你的closeFunction：

.directive('directive1', function() {
  return {
    scope: {}, // 假设你的指令用了隔离作用域
    templateUrl: 'directive1.html',
    link: function($scope) {
      $scope.closeFunction = function() {
        // 这里写你的关闭逻辑，比如隐藏元素
        $scope.isVisible = false;
        console.log('指令1的关闭函数被触发');
      };

      // 监听来自指令2的关闭通知
      $scope.$on('triggerDirective1Close', function() {
        $scope.closeFunction();
      });
    }
  };
})

指令2修改：广播事件触发关闭 #

在指令2的submit函数里，通过$rootScope广播事件，通知指令1执行关闭：

.directive('directive2', function($rootScope) {
  return {
    scope: {},
    templateUrl: 'directive2.html',
    link: function($scope) {
      $scope.submit = function() {
        // 先执行你的提交逻辑
        console.log('执行表单提交');
        
        // 广播关闭事件，所有监听这个事件的指令都会响应
        $rootScope.$broadcast('triggerDirective1Close');
      };
    }
  };
})

小提示：如果两个指令在同一个父作用域下，用$scope.$broadcast会比$rootScope更高效，因为它只会在当前作用域的子作用域传播事件。

方案2：使用共享服务（推荐，解耦性更强） #

创建一个专门的共享服务来管理指令间的通信，把需要调用的方法注册到服务里，两个指令都注入这个服务就能直接调用。这种方法符合AngularJS的依赖注入思想，耦合度低，后期维护和测试都更方便。

第一步：创建共享通信服务 #

.factory('DirectiveCommService', function() {
  var service = {};
  // 存储指令1的关闭函数
  var _closeFn = null;

  // 注册关闭函数的方法
  service.registerCloseFn = function(fn) {
    _closeFn = fn;
  };

  // 触发关闭的方法
  service.triggerClose = function() {
    if (_closeFn && typeof _closeFn === 'function') {
      _closeFn();
    }
  };

  return service;
})

第二步：指令1注册关闭函数到服务 #

.directive('directive1', function(DirectiveCommService) {
  return {
    scope: {},
    templateUrl: 'directive1.html',
    link: function($scope) {
      $scope.closeFunction = function() {
        $scope.isVisible = false;
        console.log('指令1的关闭函数被触发');
      };

      // 将关闭函数注册到共享服务
      DirectiveCommService.registerCloseFn($scope.closeFunction);

      // 可选：指令销毁时注销函数，避免内存泄漏
      $scope.$on('$destroy', function() {
        DirectiveCommService.registerCloseFn(null);
      });
    }
  };
})

第三步：指令2调用服务触发关闭 #

.directive('directive2', function(DirectiveCommService) {
  return {
    scope: {},
    templateUrl: 'directive2.html',
    link: function($scope) {
      $scope.submit = function() {
        console.log('执行表单提交');
        
        // 通过共享服务直接调用指令1的关闭函数
        DirectiveCommService.triggerClose();
      };
    }
  };
})

方案3：通过父作用域传递（适合同父组件下的指令） #

如果你的两个指令都在同一个父控制器/父指令的作用域下，可以把closeFunction挂载到父作用域上，指令2直接调用父作用域的方法。不过这种方法耦合度较高，适合指令关系紧密、不会单独复用的场景。

父模板示例 #

<div ng-controller="ParentCtrl">
  <directive1 parent-scope="this"></directive1>
  <directive2></directive2>
</div>

父控制器 #

.controller('ParentCtrl', function($scope) {
  // 用来存储指令1的关闭函数
  $scope.directive1Close = null;
})

指令1绑定父作用域并赋值函数 #

.directive('directive1', function() {
  return {
    scope: {
      parentScope: '=' // 双向绑定父作用域
    },
    templateUrl: 'directive1.html',
    link: function($scope) {
      $scope.closeFunction = function() {
        $scope.isVisible = false;
        console.log('指令1的关闭函数被触发');
      };

      // 将关闭函数赋值给父作用域变量
      $scope.parentScope.directive1Close = $scope.closeFunction;
    }
  };
})

指令2调用父作用域的方法 #

.directive('directive2', function() {
  return {
    templateUrl: 'directive2.html',
    link: function($scope) {
      $scope.submit = function() {
        console.log('执行表单提交');
        
        // 调用父作用域上的关闭函数
        if ($scope.directive1Close) {
          $scope.directive1Close();
        }
      };
    }
  };
})

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