AngularJS最佳实践 - 指令之间的通信无需$rootScope

angularjs best practices - communication between directives without $rootScope?

本文关键字：通信 rootScope 之间 最佳 指令 AngularJS      更新时间：2023-09-26

所以我有一个嵌套指令，我需要与页面上的单独指令（同一个控制器）进行通信。我尝试了隔离范围方法，但考虑到第一个指令的嵌套程度，我放弃了这种方法。 我正在编写此代码，请记住$scope可能在 2.0 中不存在。我的方法是否有适合 Angular 最佳实践的替代解决方案？

嵌套指令内部（3 级深度）：

$scope.chooseCard = function (selectedId) {
  this.data = 'init value';
  $rootScope.$emit('row chosen', selectedId);
  this.data = selectedId;
};

在指令 #2 中需要嵌套指令中的数据： 

$rootScope.$on('row chosen', function (e, data) {
  ctrl.id = data;
  console.log("this is the IDDDDDD", ctrl.id);
  Service.func(ctrl.id);
});

$scope可能不存在，但绑定肯定会存在。 您有两个主要选项：

  1. 使用服务并在那里设置此数据，然后在子指令中监视它。 这将起作用，但我确实觉得它会损害组合和重用，因为您不能再拥有该指令的多个实例（它们都依赖于单例服务）。

  2. 如前所述，使用隔离作用域，然后使用"&"表达式监视绑定。 这将是您在不使用类似ngForward的情况下最接近 Angular2 的方法，因为来自父>子级的数据流仍然是 Angular2 中数据绑定的主要方法。 这是完成此 imo 的首选方法，即使它最终会更加冗长。

无论选择哪种解决方案，请确保不会泄漏内存;如果不解除该$rootScope.$on处理程序的绑定，则每次创建并随后销毁指令的实例时都会泄漏内存。

相关文章：