要知道指令内容何时发生变化的事件

Question

我正在创建一个指令，它定位子div为对齐，并且margin = 0改变子div的高度。 （如http://brunjo.github.io/rowGrid.js/）

一切运转良好。除非孩子们正在改变。

我已经添加了一个关于孩子数量的手表，这样如果我添加一个孩子，它仍然有效。

但是如何观察每个孩子的大小，以便在他们改变时更新布局？把手表放在每一个上面？

这是一个掠夺者：http://plnkr.co/edit/OYZ1snIjmLS4HRB6J5vy?p=preview

我是棱角分明的新手，这可能是一个简单的答案。

提前致谢。

Answer 1

<强>注意：
监视表达式（例如$watch()函数调用的第一个参数）每$摘要周期执行几次。因此，应尽快保存。如果您的元素有很多子元素，那么计算它们的所有宽度可能会变得很昂贵。

如果是这种情况，最好捕获与调整子项大小相关的事件，并仅在确实存在调整大小的可能性时检查大小。

---

那就是说，你可以这样做：

$scope.$watchCollection(function() {
    return [].map.call(el[0].children, function (child) {
        return child.offsetWidth;
    });
}, function(newValue, oldValue) {  // Note: newValue comes before oldValue
    if (oldValue !== newValue) {
        console.log('eoke');
        this.layout(el, 'blue');
    }
}.bind(this)); 

另请参阅此 short demo 。