CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-masonry
pedropeixoto
pedropeixoto

Reputation: 1633

How to expand DIVs the "angular way" (using angular masonry)

I'm trying to expand a DIV element on my angular layout. I'm using angular-masonry to give a mason-style to my layout, but now I need to expand those boxes on click. I've tried a lot of stuff, but it kept overlapping my others elements. Soon figured out that I'll have to write it the "angular way" so I don't run into DOM manipulation conflicts.

Here's my code:

  <div class="row" masonry>

    <div 
    class="masonry-brick item-component col-sm-4 col-md-4" 
    ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
    ng-click=" // expand #expandable // "
    >

      <div class="component-wrapper">
        <div class="component">
          <img ng-src="@{{ component.thumb }}"/>
        </div>
        <div class="component">
          @{{ component.name_en }}
        </div>
      </div>

      <div id="expandable" class="expand-me codes-wrapper">
          <p>XXX</p>
          <p>YYY</p>
          <p>ZZZ</p>
      </div>


    </div>
  </div>

Here's what I want to accomplish in the "angular way": http://codepen.io/desandro/pen/daKBo

Upvotes: 3

Views: 1051

Answers (1)

michael
michael

Reputation: 16341

In your example (http://codepen.io/desandro/pen/daKBo) if you click on an element there are two things that will be done:

(1) the style of the clicked item is changed (2) the function masonry is called on the container element that keeps the divs.

I can't see such a function in angular-masonry pre builded. So i'll guess you have to do this by your self. Here are some hints how to solve this (i havn't try it in real)

Bind a function to ng-click. In this function set a state to the current component. This state shoud be used to toggle the css-class of the element. you can use ng-class for this.

The second part is little bit more complex. I would suggest write a direcive 'masonry-change-listener' and bind it to the element that is bound to the same element with the directive masonry. If you click on a component $emit an event, that something has changed. In the directive 'masonry-change-listener' listen to this event. if this event fires you have to call $element.masonry.apply($element) in the link function.

Upvotes: 1

Related Questions