css - 在 AngularJS 中使用 Angular Masonry？

Question

我有这样的布局。我正在为 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 不是函数。

如有任何帮助，我们将不胜感激!

Answer 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 数据添加到您的问题中吗？祝你周末愉快!