需要一个指令的控制器中的另一个指令内 [英] Require a Directive's Controller inside another Directive

问题描述

我试图让两个指令通过他们的（内部定义）控制器与对方沟通，但我新的角度和仍不清楚的一对夫妇的事情。

I'm trying to get two directives to communicate with each other via their (inner defined) controllers, but I'm new to angular and still not clear on a couple of things.

从本质上讲，我只是想两个独立的指令在那里，当你点击内部指令的元素上的 A 的，内部的乙的执行某些功能;我想告诉的乙的自我更新的基础上，的 A 的会发生什么。我已经走到这一步：

Essentially, I just want two separate directives where, when you click on an element inside directive A, some function within B executes; I want to tell B to update itself, based on what happens in A. What I've got so far:

app.directive('A', function(){
    return{
        restrict: 'E',
        require:'B',
        templateUrl:'a.html',
        link: function(scope, element, attr, bController){
            //should I run B's behavior here?
            //how? can't reach B's controller
        },
        controller: function(){
            //or here?
            //how do I access B's controller here?
        },
        controllerAs:'A'
    };
});

app.directive('B', function(){
    return{
        restrict: 'E',
        templateUrl:'b.html',
        link: function(scope, element, attr){

        },
        controller: function(){
            //here there'll be functions that manipulate
            //elements inside this directive (B)
        },
        controllerAs:'B'
    };
});

我得到一个错误，因为的 A 的试图找到控制器命名的乙的，但它是一个指令： https://docs.angularjs.org/error/$compile/ctreq

I'm getting an error, since A is trying to find the controller named B, but it's a directive: https://docs.angularjs.org/error/$compile/ctreq

另外，我应该处理从链接函数或指令的控制器内的元素？即使看完之后，我仍然在链接有点模糊 VS 控制器;我看到它的方式：链接就像各种各样的构造，而控制器就是行为去。

Also, should I manipulate elements from within the link function, or the directives controller? Even after reading, I'm still a bit fuzzy on link vs controller; the way I see it: link is like a constructor of sorts, whereas the controller is where behavior goes.

这是否意味着我始终将DOM操作的控制器内的？

So does that mean I always place DOM manipulation inside of the controller?

有没有其他办法的办法呢？我读过一些关于 $范围，但仍然没有上完全清楚无论是。

Is there any other way to approach this? I've read a bit about $scope, but still not entirely clear on that either.

推荐答案

您只能要求父元素或相同元素的指令。你可能使用B A里面，或者反之亦然。

You can only require directives in parent elements or in the same element. You're probably using B inside A, or vice verse.

如果是这样的话，你的被其他，你可以去到内部direcive和使用要求外内部使用的一个指令。在 ^ 意味着它可以从你的父母指令。

If that's the case, you have one directive being used inside the other, you can go to the inner direcive and require the outer by using: require: '^A'. The ^ means it can be directive from your parent.

如果该指令是兄弟，你可以建立第三个指令，将父母他们两个，里面都需要它，他们将利用这一媒介进行沟通：

If the directives are siblings, you could build a third directive that would parent them both, and required it from inside both and they would use this medium to communicate:

app.directive('C', function() {
  return {
    controller: function() {
      this.registerPartyA = function(partyA) {
        // ...
      };

      this.registerPartyB = function(partyB) {
        // ...
      };
    }
  }
});

然后从你的指令;

Then from your directives;

app.directive('B', function() {
  return {
    require: '^C',
    link: function(scope, elm, attr, cCtrl) {
      cCtrl.registerPartyB(...);

      // maybe when user clicks you do
      // cCtrl.aCtrl.doSomething()
    }
  };
});

如果他们不相关无论如何，你仍然可以使用服务，并在这两个指令注入的服务，并以此作为一个共同的地方。

If they're not related anyhow, you could still use a service and inject the service in both directives, and use this as a common place.

最后，如果两个指令都共享同一个范围（是相同的元素，或没有指令需要隔离/儿童作用域），你根本就直接申报方法<$ C $内C> $范围键，简单地从其他指令调用它：

Finally, if both directives share the same scope (are under the same element, or none of the directives require isolated/children scopes) you could simply declare the method directly inside the $scope and simply call it from the other directive:

app.directive('A', function() {
  return {
    controller: function($scope) {
      $scope.declaredByA = function() {
        // ...
      };
    }
  };
});

app.directive('B', function() {
  return {
    controller: function($scope) {
      $scope.clicked = function() {
        $scope.declaredByA();
      };
    }
  };
});

和一个最后一次通话，你可以使用<一个href=\"http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs\"><$c$c>$scope.$broadcast和 $范围。$发出 做沟通。

And a last call, you could use $scope.$broadcast and $scope.$emit to do the communication.

我会尝试在我所提到的的顺序，只要你符合要求。

I would try in the order I've mentioned, as long as you meet the requirements.

这篇关于需要一个指令的控制器中的另一个指令内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！