6

我对 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 中定义的控制器？我是否必须使用一个“单独的”控制器，这两个控制器都需要相互配合？

4

2 回答 2

7

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

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

在您的情况下，您可以创建一个提供该doSomething功能的服务并将其注入到directive1anddirective2中。

于 2013-05-17T14:55:27.050 回答
3

如果您设置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 的控制器，但从未发生过。

于 2013-05-17T13:56:06.027 回答