Question

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

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

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

现在我希望指令与控制器相互通信（Ive在directive1中定义了'controller：'）：

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

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

但是我总是得到'未找到控制器'例外...（我不确定^因为它只能通过父母向上搜索）。
如果它们没有嵌套，是否不能使用指令2中的directive1中定义的控制器？我是否必须使用“单独”控制器，它们都需要相互协作？

Answer 1

我是否必须使用“单独”控制器，它们都需要相互协作？

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

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

Answer 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>

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

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

中

使用你的代码，你找不到控制器，因为它正在树上找到一个名为directive1Ctrl的控制器，它永远不会发生。

两个指令（不是嵌套在HTML中）如何相互通信？

2 个答案: