如何以“角度方式”扩展 DIV（使用角度砌体）

Question

我正在尝试在我的角度布局上扩展一个 DIV 元素。我正在使用angular-masonry 为我的布局赋予石匠风格，但现在我需要在点击时展开这些框。我尝试了很多东西，但它一直与我的其他元素重叠。很快就发现我必须以“角度方式”来编写它，这样我就不会遇到 DOM 操作冲突。

这是我的代码：

  <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>

这是我想以“角度方式”完成的任务：http://codepen.io/desandro/pen/daKBo

Answer 1

在您的示例 (http://codepen.io/desandro/pen/daKBo) 中，如果您单击一个元素，将会完成两件事：

(1)点击项的样式改变 (2) 在保存div的容器元素上调用masonry函数。

我在预先构建的 angular-masonry 中看不到这样的功能。所以我猜你必须自己做这件事。这里有一些提示如何解决这个问题（我还没有真正尝试过）

绑定一个函数到 ng-click。在这个函数中为当前组件设置一个状态。此状态应用于切换元素的 css 类。您可以为此使用 ng-class。

第二部分稍微复杂一些。我建议编写一个指令“masonry-change-listener”并将其绑定到与指令砌体绑定到同一元素的元素。如果你点击一个组件 $emit 一个事件，那事情就发生了变化。在指令“masonry-change-listener”中收听此事件。如果此事件触发，您必须在链接函数中调用 $element.masonry.apply($element)。