告诉孩子指令家长指令做动作DOM后采取行动？ [英] Tell child directive to act after a parent directive has done DOM actions?

问题描述

让我们说我们有一些嵌套指令：

Let's say we have some nested directives:

<big-poppa>
  <baby-bird></baby-bird>
</big-poppa>

和我们说，大波帕要创建一个所有他的孩子的指令可以共享一个组件。这将是很好的把它的控制器，但该组件所需要的DOM，所以它需要建立链接功能。

And let's say that big-poppa wants to create a component that all of his children directives can share. It would be nice to put it in the controller, but this component needs the DOM, so it needs to be build in the link function.

然后我们假设婴儿鸟组件想从组件读取。也许是想倾听来自它的事件，也许它发送一个或两个命令。我们面临的挑战是，控制器火降则DOM（第一个父，子再）和连杆后方法火焰另一个方向上，所以执行顺序是这样的：

Then let's say the baby-bird component wants to read from component. Maybe it wants to listen to events from it, maybe send it a command or two. The challenge is that controllers fire down the dom (first parent, then child), and post-link methods fire the other direction, so the execution order looks like this:

1. bigPoppa控制器


2. babyBird控制器


3. babyBird链接


4. bigPoppa链接

事实上，以后孩子的父母的链接方法火灾对我来说是内部指令通信挑战的原因。我想父母建立共享的DOM组件，但DOM建设应在链接功能发生。因此，父母的子女后，构建组件

The fact that the parent's link method fires after the child's is the cause of an intra-directive communication challenge for me. I want the parent to build the shared DOM component, but DOM construction should happen in a link function. The parent therefore builds the component after any children

我可以用超时（毛重），或许诺解决这个（复/不地道？）。这里是提琴：

I can solve this with a timeout (gross), or a promise (complex/non-idiomatic?). Here is the fiddle:

http://jsfiddle.net/8xF3Z/4/

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


    app.directive('bigPoppa', function($q){
        return {
            restrict: 'E',
            controller: function($scope){
                console.log('bigPoppa controller');
                var d = $q.defer()
                $scope.bigPoppaLinkDeferred = d
                $scope.bigPoppaLink = d.promise
            },
            link: function(scope, el, attrs){
                console.log('bigPoppa link');
                scope.componentThatNeedsDom = { el: el, title: 'Something' };
                scope.bigPoppaLinkDeferred.resolve()
            }
        }
    });

    app.directive('babyBird', function(){
        return {
            restrict: 'E',
            controller: function(){ console.log('babyBird controller'); },
            link: function(scope, el, attrs, bigPoppaController){
                console.log('babyBird link');

                // console.log('poppa DOM component', scope.componentThatNeedsDom); // Not yet defined, because the parent's link function runs after the child's

                // setTimeout(function(){ console.log('poppa DOM component', scope.componentThatNeedsDom); }, 1); // Works, but gross

                scope.bigPoppaLink.then(function(){
                  console.log('poppa DOM component', scope.componentThatNeedsDom);
                }); // works, but so complex!

            }
        }
    });

    console.log(''); // blank line

背景很多在这里，但我的问题是简单的：

Lots of background here, but my question is this simple:

有没有干净的方式父母的指令已经运行其链接后功能之后做一个孩子的指令的行为？

Is there a clean way to do behavior in a child directive after a parent's directive has run its post-link function?

也许使用优先级或 pre 和后的一种方式链接的方法呢？

Maybe a way of using priority, or the pre and post link methods?

推荐答案

实现这一点的另一种方式是使用纯角范围事件从父链接功能到子通信

Another way of achieving this is to use plain Angular scope events to communicate from the parent linking function to the child.

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

app.directive('bigPoppa', function($q){
  return {
    restrict: 'E',
    link: function(scope, el, attrs){
      scope.$broadcast('bigPoppa::initialised',  {el: el, title: 'Something'});
    }
  }
});

app.directive('babyBird', function(){
  return {
   restrict: 'E',
    link: function(scope, el, attrs) {
      scope.$on('bigPoppa::initialised', function(e, componentThatNeedsDom) {
        console.log('poppa DOM component in bird linking function', componentThatNeedsDom); 
      }); 
    }
  }
});

这可以看出在 http://jsfiddle.net/michalcharemza/kerptcrw/3/ <工作/ A>

This can be seen working at http://jsfiddle.net/michalcharemza/kerptcrw/3/

这有这样的好处：

• 没有作用域观察家


• 而不是取决于控制器/ pre-LINK /链接后阶段的顺序的知识，它采用了明确的信息发送/接收模式，所以我认为是比较容易理解和维护。


• 不依赖于行为在pre-链接功能，这是不是典型的是，你必须留心不要把在修改DOM它的行为。


• 不添加变量的范围层次结构（但它确实增加了事件）

这篇关于告诉孩子指令家长指令做动作DOM后采取行动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！