klederson / angular-masonry-directive Goto Github PK

Would be possible to post an example on Codepen or sort of ?

I have implemented this directive.

1. include Masonry js file, Masonry directive,
2. Added it in app.js
3. Used as below:

Hi there,
First of all, great work! I've been stuck with lots of other masonry alternative and trying to tying them to Angular. Yours worked just fine.

One thing I would add though. It doesn't have any scope monitoring that it couldn't update the layout once the data are updated.

The documentation doesn't include the fact that it requires the masonry js file and the imagesloaded js file which is no longer including with masonry. Also your example has a class selected .title but this is not included on the masonry-tile div.

Is there a way to remove all the tiles from the DOM? Just emptying the model for ng-repeat doesn't remove the items in the DOM.

For some reason it doesn't work even tho I included it as you explained.

In trying to add gutter into the options for the masonry today, I noticed that when setting "gutter" the whole module broke. This appears to be because of the way Masonry looks at strings rather than Ints, in your code you get the options via .fromJson which always returns a string.
I have put in a quick fix to my code, may be a better way but it works for me. If this is helpful to you then please run with it, great module btw.

//line 7...
      var container = elem[0];
      var options = angular.extend({
           itemSelector: '.item'
      }, angular.fromJson(attrs.masonry));

      // NEW - check for int value options
      angular.forEach(options, function(x, y){
            if (!isNaN(x)) options[y] = parseInt(x);
      });

     var masonry = scope.masonry = new Masonry(container, options);
//line 19...

Hi,

My project has following config in my bower.json

  "devDependencies": {
    "angular-masonry-directive": "https://github.com/klederson/angular-masonry-directive.git#cf0c7a5f6aebdc60f8eda73f360d9f6b53af9267",
    "masonry": "3.3.2"
  }

I started getting following error from "imagesloaded.js" (v.4.1.0) line: 115
"Uncaught TypeError: Cannot read property 'prototype' of undefined"

ImagesLoaded.prototype = Object.create( EvEmitter.prototype );¨

could you fix bower.json to use more specific versions instead just "latest" so it would not cause unexpected crashes?

For now I need to add 'ImagesLoaded" also as dependency for my project as well and define version to '3.2.0'.

Hi
it loads divs's overlapped when it loads first time , once i move to other menu and come back to same page it will show properly

Regards
Bhavesh

PS : new to this pls help , help will be appreciated :)

This is an awesome directive, thanks a lot for your work :)

I've found myself with a large amount of data/images in my masonry instance, and I would love to turn Angular debugging off to help performance. Only issue is that in the masonryTile directive, the master brick is being defined with scope() (which will break with debugging off). This is where my Angular knowledge ends... is there any alternative to the scope() method so that we don't need debugging?

Thanks a bunch!

Strange but i do not understand this:

<div masonry>
   <div masontry-tile>
   <div masontry-tile>
   <div masontry-tile>
 ...

Masonry-tile directive execute, but it do not work: grid not shown at all.
But if fi use masonry this way:

<div masonry>
   <div masontry-tile ng-repeat>

Its work properly.
Why this is happen and how can i fix it? Any help or suggestions?

https://rails-assets.org requires the GitHub project to contain a release to allow the component to be added to its database.

Can you please create a release? After you do, please try: https://rails-assets.org/components/new to check if there are other problems.

angular2 is in beta. Is there any plan/thoughts for a version that works on ng2?

I try, but received this error on console. My code is:

<div class="grid">
<div masonry='{ "transitionDuration" : "0.4s" , "itemSelector" : ".tile", "columnWidth" : 160 }'>
  <div class="grid-item" masonry-tile ng-repeat="item in items">
    <img ng-src="{{ item.src }}" class="img-responsive" onerror="this.src='/public/img/404.jpg'"/>

Any idea?

It would behelpful to mention in the Readme thet the dependency "overlay" has a script, item.js, which isn't loaded when wiredep is used. The solution is to use the "overrides" attribute in the bower.json:

{
  "name": "myExampleApp",
  "overrides": {
    "outlayer": {
      "main": [
        "item.js",
        "outlayer.js"
      ]
    }
  },
  "dependencies": {
    "angular": "~1.4.*",
    "angular-masonry-directive": "*",
    ....
  },
  ...
} 

Is there an open source license associated with the use of this code?

Current angular-masonry-directive.js requires ngAnnotate preprocessing before bundling, and it tooked almost 1h to find out what was wrong in my bundling,

My fix was to add ['$timeout', function($timeout) ...]

Hi,

Now I'm trying to use this directive, but imagesLoaded does not work, if my tiles are included direct from HTML:

<div masonry='{ "transitionDuration" : "0.4s" , "itemSelector" : ".tile"}'>
  <div class="tile" masonry-tile>custom HTML</div>
  <div class="tile" masonry-tile>custom HTML</div>
</div>

It seems to me, that link of masonryTile directive is started earlier than link of masonry directive.
I think that I found explanation: http://stackoverflow.com/questions/18294726/calling-order-of-link-function-in-nested-and-repeated-angularjs-directives#answer-18491502

Hello,

The directive isn't working if the masonry-tile is not a direct child of masonry.
Let's say I have a directive called "thumbnail" which contains a template:

Can you support non-direct child of masonry?

Thanks,
Shai

lines 58 and 62, replacing .get(0) with [0] worked locally

Hi there

I've tried to get this to work but without luck. I can see several weird things in the code, for instance:

var master = elem.parent('*[mansory]:first').scope();

Is there a reason this is called "mansory" and not "masonry"? I also don't think parent() supports selectors, unless you use jQuery?

I really like the idea of a directive that doesn't require jQuery. :)

Getting JS error:

ReferenceError: imagesLoaded is not defined

Using on my own custom directive:

<div class="row" masonry='{"transitionDuration":"0.4s", "itemSelector":".tile"}'>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile ogo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <template-box masonry-tile logo="/images/logo.jpg" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus ipsum in aliquam convallis."></template-box>
            </div>
</div>

Using Masonry v3.1.5.

So i've downloaded the ZIP file.
Included the only file in the src folder in my page.
Added 'masonry' to the app and the controller in which the masonry will be used.
Copy-pasted the html directive from the example to my page (only the masonry="..." and masonry-tile parts).

And i get the following error :
Error: [$injector:unpr] Unknown provider : masonryProvider <- masonry <- bodyController

'bodyController' is obviously the name of the controller in which i placed the masonry directives.

Am i missing something here or is the module not working as intended?

there is a typo mistake
mansory instead of masonry
var master = elem.parent('*[mansory]:first').scope();

Also, your selector works for "masonry" attribute and not for "data-masonry".

As in angular, we are supposed to be able to use both, I don't know if it would be possible to make is match both.

i used the same code provided here but all items are arranged such that only one image appears in a row and there is no control on height and width. columnWidth parameter didn't work.how to align images properly

i installed angular-masonry-directive via bower install and got the missing ignore invalid meta data error during install and verified that an ignore section is indeed missing in the angular-masonry-directive.js file. also, a whole bunch of other dependencies got installed which were not mentioned in your readme file.

i suspect that i would need to reference the dependencies in the htm & app file?