两个指令（未嵌套在 HTML 中）如何相互通信？答案

【问题标题】：How can two directives (that are not nested in HTML) communicate with each other?两个指令（未嵌套在 HTML 中）如何相互通信？
【发布时间】：2013-05-18 00:06:34
【问题描述】：

我对 angularJS 很陌生，我有一个问题（希望不是那么愚蠢）：

我有 2 个指令（不是嵌套的）：

<div directive1></div>
<div directive2></div>

现在我希望指令与控制器相互通信（我在指令 1 中定义了一个“控制器：”）：

myApp
    .directive('directive2', function () {
        return {
            require: "^directive1",

            link: function (scope, element, attrs, directive1Ctrl) {
                directive1Ctrl.doSomething();
            }
        };
    });

但是我总是得到“找不到控制器”异常..（我不确定 ^ 原因，它仅用于向上搜索父母）。
如果没有嵌套，是否不能使用指令 2 中指令 1 中定义的控制器？我是否必须使用一个“单独的”控制器，这两个控制器都需要相互配合？

【问题讨论】：

是什么阻止你拥有多个相同的指令？即 2 个指令 1 和 1 个指令 2 谁与谁交谈？
它是我想要实现的一个小功能......我需要 2 个不同的组件相互通信，它们不是嵌套的
有什么原因不能将同一个变量绑定到两者并观察它吗？
使用您的代码，directive1 应该定义一个控制器，这将在 "this" 上公开一个方法 "doSomething"。参考::sitepoint.com/practical-guide-angularjs-directives-part-two

标签： angularjs angularjs-directive

【解决方案1】：

我是否必须使用一个“单独的”控制器，两者都需要相互配合？

这很接近。在应用程序的不同部分（两个控制器、两个指令、一个指令和一个控制器等）之间共享数据和功能的标准方法是在服务中提供该数据或功能。然后可以将该服务注入到任何需要它的应用程序组件中。

在您的情况下，您可以创建一个提供 doSomething 函数的服务并将其注入到 directive1 和 directive2 中。

【讨论】：

这就是我所期望的答案 :(...考虑让指令通过范围进行对话..但我认为该服务可以更强大..无论如何谢谢 ;)

【解决方案2】：

如果您设置require: "^directive1",，您的指令 2 必须在指令 1 中：

<div directive1>
    <div directive2></div>
</div>

您也可以使用“?directive1”，使其成为可选。

简单地说：有两种类型的控制器：指令控制器和普通控制器。

使用控制器，您可以在将在视图中更新的范围内设置值。这是一个带有一个控制器和两个指令的 plunkr：http://plnkr.co/edit/IicvQfuv8LMOb4iVQen5

var app = angular.module('plunker', []);

app.directive('directive1', function() {
    return {
        restrict: 'A',
        replace: true,
        template: '<span>{{bar}}</span>'
    }
});

app.directive('directive2', function() {
  return {
      restrict: 'A',
      replace: true,
      template: '<b>{{bar}}</b>'
  }

});

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.foo ="layla";
  $scope.bar ="hello";
});

和html：

<body ng-controller="MainCtrl">
  this is directive1: <div directive1>{{foo}}</div>.
  <br />
  this is directive2: <div directive2>{{foo}}</div>.
  Hello {{name}}!
</body>

请注意，指令是您的浏览器可以解析的新元素。它们是您在 app.directive() 部分中定义的 HTML 的扩展。

当 AngularJS 找到 {{foo}} 时，它会将其绑定到一个范围，该范围可以使用有权访问该范围的更近控制器进行修改。在这种情况下，MainCtrl。您也可以将 MainCtrl 放入 <div ng-controller="MainCtrl">...</div>

使用您的代码，您会发现控制器未找到，因为它正在向上查找名为directive1Ctrl 的控制器，但从未发生过。

【讨论】：