Using Angular Masonry in AngularJS?

Question

I have a layout like this. I am using passsy extension for angular masonry.

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

Browser is getting hanged whenever I use it. Debugging script with tools says element.masonry is not a function.

Any help would be appreciated!

Answer 1

Hmm, at the moment I work from my laptop at home and I can't get passy's version running too and can not put my finger on the issue. But this is what I can offer you for now:

I made a very simple directive based on things I've read somewhere:

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);
    }
  };

As you can see it does not have a any options by now. When i'm at work on monday i will have a look at my sources on a proper dual screen display and provide you with a better version. My wife is starting to giving me the looks and I need to put the laptop away now. :-\

You can see in this plunker that it kinda works now. Maybe this can help you. In the meantime can you add some of your json data to your question? Have a nice weekend for now!

Answer 2

In order to get Passy's angularjs directive working you must include all the files as listed per the index file

Answer 3

I had this error, fixed it by including the original Masonry code. I was also thinking this was a pure angular port.