在执行链接函数之前,在父指令中获取子指令的数量

时间:2014-12-05 13:11:55

标签: javascript angularjs angularjs-directive

使用一个指令&多个子指令(使用require),有什么方法可以知道将执行多少个子指令?

我可以在每次执行子指令时计算(在链接函数中)。但我希望父指令知道在执行子指令的最后一个链接函数之前有多少个子节点。

我需要知道,因为当最后一个元素从子节点传递给父指令时,我需要一些特定的行为。

3 个答案:

答案 0 :(得分:3)

我很确定,如果不在父指令下搜索DOM,就无法完成。但我认为在这种专业指令中做到这一点并不成问题。

所以我会这样做:

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

app.directive("server", function() {
  return {    
    controller: function($element) {                 
      count = $element.find("client").length
      this.call = function() {
        console.log("Server has been called");

        count --;
        if (count == 0) {
          console.log("All of them are initialized");
        }
      };
    }
  };
});

app.directive("client", function() {
  return {
    require: "^server",
    link: function($scope, $elem, $attrs, serverCtrl) {
      serverCtrl.call();
    }
  };
});

指令看起来像这样:

 <server>
    <client></client>
    <client></client>
    <client></client>
  </server>

在这里你可以看到完整的工作示例: http://jsbin.com/gezewidoba/1/edit?html,js,console

答案 1 :(得分:3)

您可以利用链接分两个阶段完成的事实。您可以先在&#34;预先链接阶段&#34; 中注册所有孩子,然后在&#34;后链接阶段&#34; ,#&#> 39; d可以访问所需信息。

.directive('parent', function () {
    return {
        controller: function () {
            this.childCount = {
                pre: 0,
                post: 0
            };
        },
        link: function () {}
    };
})
.directive('child', function () {
    return {
        require: '^parent',
        compile: function () {
            return {
                pre: function ($scope, $element, $attrs, parentCtrl) {
                    ++parentCtrl.childCount.pre;
                },
                post: function ($scope, $element, $attrs, parentCtrl) {
                    ++parentCtrl.childCount.post;
                    if (parentCtrl.childCount.post === parentCtrl.childCount.pre) {
                        // ... (this runs only on the last linked child)
                    }
                }
            };
        }
    };
})

这样您就可以在上一次孩子的链接中访问该信息。

当然,如果您很快就不需要这些信息,您可以在父控制器中注册所有子控制器,然后从父后连接功能运行最后一个注册子控制器的方法。 / p>

答案 2 :(得分:1)

外部和内部指令的执行顺序如下

Outer - Controller
Child - Controller
Child - Link
Outer - Link

所以你可以使用child指令的控制器连接到父指令的控制器,通过父指令上的一些公开函数。

然后在内部指令的link函数中,您可以使用逻辑来确定元素是第一个还是最后一个等等......