How to Implement Angular Masonry with AngularJS?

I'm working on a layout that utilizes the 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>

Unfortunately, my browser freezes whenever I attempt to use it. After debugging the script with tools, it seems that element.masonry is not recognized as a function.

If anyone has any insights or solutions, I would greatly appreciate the help!

Answer №1

Currently, I am working from my laptop at home and struggling to get passy's version running as well. Unfortunately, I can't seem to identify the issue at the moment. However, here is a simple directive that I have created based on some research:

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 currently does not have any options set. When I return to work on Monday with access to my sources on a proper dual screen display, I will provide you with an improved version. My wife is giving me "the look" now, so I need to put away the laptop for the time being. :-\

You can view how it functions in this plunker for now. Perhaps this will be helpful for you. In the meantime, could you add some of your JSON data to your question? Enjoy your weekend!

Answer №2

If you want to successfully implement Passy's angularjs directive, make sure to include all the necessary files exactly as they are specified in the index file.

Answer №3

After encountering an error, I was able to resolve it by integrating the original Masonry code into my project. Initially, I mistakenly believed that this was solely an Angular adaptation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a new tab that is active and use ng-repeat in the uib-tab directive

I've been trying to solve this problem for a while now. I came across a similar post, but it was left unanswered. So, I decided to create my own post with a Plunkr example. The issue I'm facing is that upon loading, the ui-tab always defaults to ...

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...

What is the process for incorporating multiple HTML pages into an Ionic hybrid mobile application?

Struggling to combine my sign in and sign up pages into a single index.html page. I'm currently working on a project involving Hybrid mobile app development. ...

Designing table rows to resemble full-width cards

Looking for a way to transform the rows of a table into full-width cards while maintaining the row layout? Here's what I have tried so far: tbody>tr { display: block; padding: 1rem 0.5rem 1rem 0.5rem; margin: 1.5rem; border: 1px solid rgba( ...

Styling the <div> element to create a unique rotation and tilt aesthetic

Would anyone be able to guide me on how to recreate the tilted style of the header section shown in the image using HTML and CSS? https://i.sstatic.net/mhJWA.png body { margin: 0px; background-color: #FFEF4C; } #header { background-color: #FF35 ...

enhancing the appearance of the initial sentence in the closing passage through CSS styling

Is there a way to make only the first sentence in the final paragraph bold using CSS? Specifically, I would like to add extra padding to the top of this last paragraph so that it wraps around an image. However, when I increase the bottom padding of the flo ...

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

Controller binding is not possible without the directive 'tabset' and its controller

I'm brand new to angular, and I've hit a roadblock with directive communication. Specifically, I'm getting the error message Cannot bind to controller without directive 'tabset's controller. Here is my Code HTML code <tabset ...

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

What is the highest image size that desktop Chrome can accommodate?

Let's delve into a specific scenario amidst the vast possibilities. Assume the following technical specifications: Browser: Chrome Latest (Desktop) Hardware: Windows Standard PC with default Intel Graphics card Ram: 8GB Processor: i7 @ 3.40 GHz The ...

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

Combining jQuery's UI widget with my topNav disrupts horizontal alignment

Within my web application, I have integrated jQuery and jQuery UI (specifically versions 1.10.2 and 1.10.4). To style the components, I utilize the CSS found in /js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css from the jQuery site. Prior to i ...

AngularJS directive for collapsing content. Only keep self expanded

As I search for the most effective solution to create a collapse/expand directive that functions similar to an accordion, where only one can be open at a time on the page, I find myself struggling. What is the optimal approach to achieve this and have one ...

The alignment of the container (heading) does not match that of the row (form) in Bootstrap 5

As mentioned in the title, I am looking to ensure that the rows have the same spacing as the container. I am currently using Bootstrap 5, so when you preview the HTML on Stack Overflow, it may not appear exactly as intended. To provide a clearer understand ...

When CSS media queries are applied, the background color of Div does not fully extend to the edge

Although the problem seems simple, I am finding it difficult to find a solution. This page was created as part of my course. https://i.sstatic.net/DKCva.jpg While in developer mode and trying to resize the screen, I noticed that the background color of ...

Enhancing Your Website with WordPress Customizer API: Introducing Kirki's Repeater Image Feature

Allow me to clarify this situation as thoroughly as I can. To begin with, I am utilizing a toolkit known as Kirki to enhance the WordPress Customizer API Within my theme, there is a section that features a 4-column layout of services, each accompanied by ...

How to create a freeze panes feature like MS Excel using HTML and CSS

In my web application for iPad using Angular JS, HTML5, and CSS3, I'm facing a challenge with a large table that requires both horizontal and vertical scrolling, along with a "freeze-pane" feature similar to MS Excel. Currently, I've divided the ...

Button inside Md-dialog controller triggering dysfunction in Md-dialog

I followed the instructions in the documentation to create a functional md-dialog, but I am encountering an issue with a button that triggers the dialog. After opening and closing the dialog, the button (and anything else controlled by the script in that c ...

Tips for updating the parent element when hovering over a child in CSS

Is there a way to change the background color of the parent product when hovering over a link or details using only CSS? HTML CODE <div id="summary" align='center'>Products</div> <div id="detail" align='center'& ...

AngularJS - managing routes prior to application launch

Is it okay to implement a Service within the $stateProvider for this purpose? I have read various posts on stack overflow regarding routing, but most of them seem confusing, especially for beginners. Everyone seems to have a different approach, making it ...