Event to know when content of a directive has changed

I'm creating a directive which position children div justify and with a margin = 0 changing the height of the children div. (like http://brunjo.github.io/rowGrid.js/)

All is working well. Except when the children are changing.

I have added a watch for the number of children so that if I add a child, it is still working.

But how to watch at the size of each child to update the layout when they are changing? Put a watch on each one of them?

Here is a plunker: http://plnkr.co/edit/OYZ1snIjmLS4HRB6J5vy?p=preview

I'm new to angular, it may be an easy answer.

Thanks in advance.


NOTICE: Watch expressions (e.g. the first argument of a $watch() function call) are executed several times per $digest cycle. Therefore, they should be kept as quick as possible. If your element has many children, it might become expensive to calculate all their widths.

If that is the case, it might be better to capture the events that are associated with the resizing of the children and check the sizes only when there is indeed the possibility that something got resized.

That said, you could do something like this:

$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) {
        this.layout(el, 'blue');

See, also, this short demo.

Need Your Help

Rails 3.2: Adding seed tasks from a mountable engine

ruby-on-rails ruby-on-rails-3 rubygems rake

I have a rails application using rake db:seed too fill in some of the basics in my DB to start working. This works through a little infrastructure and a fixtures.rb someone else wrote to load a YAM...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.