在 AngularJS 中使用 Angular Masonry？答案

【问题标题】：Using Angular Masonry in AngularJS?在 AngularJS 中使用 Angular Masonry？
【发布时间】：2014-03-13 19:09:47
【问题描述】：

我有这样的布局。我正在为angular masonry 使用passsy 扩展名。

<masonry column-width="200">
    <div class="masonry-brick" ng-repeat="data in comments">
       <div ng-switch on="data.type">
         <div ng-switch-when="hoots">         
           <article class="hoot_main">
           //content goes here
           //hoot_main is the main class for this div layout
           </article> 
          </div>
        </div>
      </div>
      <div ng-switch on="data.type">
       <div ng-switch-when="article">         
        <article class="hoot_main">
         //content goes here
         //hoot_main is the main class for this div layout
        </article> 
      </div>
     </div>
      <div ng-switch on="data.type">
        <div ng-switch-when="story">         
          <article class="hoot_main">
           //content goes here
           //hoot_main is the main class for this div layout
          </article> 
       </div>
      </div>
   </div>
 </masonry>

每当我使用浏览器时，它都会被挂起。用工具调试脚本说element.masonry不是函数。

任何帮助将不胜感激！

【问题讨论】：

为什么不用砖石？ github.com/passy/angular-masonry
@mainguy 我正在整合 passy 的 angular-masonry。但是有点问题。如果你用过。请查看我的问题任何帮助将不胜感激

标签： css angularjs jquery-masonry jquery-isotope

【解决方案1】：

嗯，目前我在家里用笔记本电脑工作，我也无法运行 passy 的版本，也无法解决这个问题。但这是我现在可以为您提供的：

我根据在某处读到的内容做了一个非常简单的指令：

app.directive('masonry', function() {
  return {
    restrict: 'AC',
    controller: function($scope) {
      return $scope.$watch(function(e) {
        $scope.masonry.reloadItems();
        return $scope.masonry.layout();
      });
    },
    link: function(scope, elem, attrs) {
      var container=elem[0];
      var options='';
      return scope.masonry = new Masonry(container,options);
    }
  };

如您所见，它现在没有任何选项。当我周一上班时，我会在适当的双屏显示器上查看我的资源，并为您提供更好的版本。我的妻子开始给我看，我现在需要把笔记本电脑收起来。 :-\

你可以看到in this plunker 现在有点用了。也许这可以帮助你。同时，您可以将一些 json 数据添加到您的问题中吗？现在祝您周末愉快！

【讨论】：

谢谢哥们！！好吧，我想通了。帕西正在工作！！ .现在需要对passy数据加载进行一些数据优化
@Creator 你能分享一下你是如何修复它的吗？

【解决方案2】：

为了让 Passy 的 angularjs 指令正常工作，您必须包含索引文件中列出的所有文件

【讨论】：

【解决方案3】：

我遇到了这个错误，通过包含原始 Masonry 代码来修复它。我还以为这是一个纯角端口。

【讨论】：