Mauerwerk zu Angular ohne JQuery Hinzufügen

Ich versuche Masonry arbeitet als Angular Richtlinie zu erhalten, die teilweise online dokumentiert ist, auch wenn ich die folgenden Probleme auf dem folgenden Code habe:Mauerwerk zu Angular ohne JQuery Hinzufügen

HTML-Code:

<div ng-controller="GridCtrl" class="grid-wrapper"> 
    <div class="masonry"> 
     <div ng-repeat="item in gridItems" ng-class="item.class"> 
      <h3>{{item.name}}</h3> 
      <img ng-src="{{item.image}}"/> 
      <br> 
      <button ng-repeat="button in item.buttons">{{button.text}}</button> 
     </div> 
    </div> 
</div>

Angular Richtlinie Code:

'use strict'; 

angular.module('HomeCourtArenaApp').directive('masonry', function ($parse) { 
    return { 
     restrict: 'AC', 
     link: function (scope, elem, attrs) { 
      elem.masonry({ itemSelector: '.masonry-item', columnWidth: $parse(attrs.masonry)(scope) }); 
     } 
    };   
}); 

angular.module('HomeCourtArenaApp').directive('masonryItem', function() { 
    return { 
     restrict: 'AC', 
     link: function (scope, elem, attrs) { 
      elem.imagesLoaded(function() { 
       elem.parents('.masonry').masonry('reload'); 
      }); 
     } 
    };   
});

SCSS Code:

.grid-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: auto; 
    padding-left: 40%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    .masonry { 
     position: absolute; 
     width: 2600px; 
     max-height: 1080px; 
     .masonry-item, 
     .poster { 
      float: left; 
      width: 465px; 
      padding: 15px; 
      margin: 12px 12px 0 0; 
      box-shadow: 1px 1px 4px 3px rgba(55,55,55,0.25); 
     } 
     .masonry-item { 
      background: #fafafa; 
      height: 295px; 
      h3 { 
       width: 100%; 
       text-align: left; 
       font-size: 28px; 
       color: #3D444A; 
       display: block; 
      } 
      img { 
       display: block; 
       padding: 50px 0 10px; 
       margin: 0 auto; 
      } 
     } 
     .poster { 
      height: 631px; 
      background: #000; 
      position: relative; 
      h3 { 
       color: #fff; 
       font-family: 'adineuebold'; 
       font-size: 68px; 
       position: absolute; 
       top: 410px; 
       left: 20px; 
       z-index: 2; 
      } 
      img { 
       position: absolute; 
       left: 0; 
       top: 0; 
       z-index: 1; 
       margin: 0; 
       padding: 0; 
      } 
      button { 
       position: absolute; 
       z-index: 2; 
       left: 20px; 
       top: 590px; 
      } 
     } 
     button { 
      padding: 12px 15px; 
      font-size: 15px; 
      margin-right: 10px; 
      font-family: 'adihausregular'; 
      color: #fff; 
      text-transform: uppercase; 
      border: none; 
      background: linear-gradient(to bottom, rgba(57,134,202,1) 0%,rgba(3,75,146,1) 100%); 
      &:after { 
       content: ""; 
       background: url('img/sprite.png') no-repeat -156px -9px; 
       width: 16px; 
       height: 16px; 
       margin-left: 30px; 
       display: inline-block; 
      } 
     } 
    } 
}

Dann auch entscheidend, wie mein Skripte in meiner Indexdatei geschichtet ist:

<script src="scripts/app.js"></script> 
<script src="scripts/directives/masonry.js"></script> 
<script src="scripts/controllers/main.js"></script>

Ich halte einen Fehler in der Konsole immer was darauf hindeuten würde, ich bin das Mauerwerk irgendwo nicht richtig definieren:

Uncaught TypeError: Cannot call method 'create' of undefined

dann auch:

TypeError: Object [object Object] has no method 'masonry'

Kann jemand sehen, wo ich falsch gehe?

Ich möchte JQuery möglicherweise vermeiden, da es eine neuere Mauerwerk verfügbar gibt, die es nicht verwendet.

Quelle

2013-06-18 JohnRobertPett

Haben Sie versucht Laden 'masonry.js' vor' app.js' ? (Setzen Sie sein '

Es sieht so aus, als ob Sie die Richtlinie nicht wirklich in Ihrem HTML anwenden.

<div ng-controller="GridCtrl" class="grid-wrapper"> 
    <div class="masonry" masonry> 
     <div ng-repeat="item in gridItems" ng-class="item.class" masonry-item> 
      <h3>{{item.name}}</h3> 
      <img ng-src="{{item.image}}"/> 
      <br> 
      <button ng-repeat="button in item.buttons">{{button.text}}</button> 
     </div> 
    </div> 
</div>

Es dauerte eine Weile, Isotop Arbeit in meiner app zu machen, lassen Sie mich wissen, ob das hilft, und wenn der Fehler, den Sie Änderungen empfangen.

Versuchen Sie auch und fügen Sie die Spaltenbreite statisch in Ihrer Direktive für jetzt und sehen, was passiert. Der Fehler Typeerror: Object [object Object] hat keine Methode ‚Mauerwerk‘ könnte attrs.masonry beziehen:

angular.module('HomeCourtArenaApp').directive('masonry', function ($parse) { 
    return { 
     restrict: 'AC', 
     link: function (scope, elem, attrs) { 
      elem.masonry({ itemSelector: '.masonry-item', columnWidth: 200 }); 
     } 
    };   
}); 

angular.module('HomeCourtArenaApp').directive('masonryItem', function() { 
    return { 
     restrict: 'AC', 
     link: function (scope, elem, attrs) { 
      elem.imagesLoaded(function() { 
       elem.parents('.masonry').masonry('reload'); 
      }); 
     } 
    };   
});

Quelle

2013-06-18 13:41:06 Dine

Danke für die Antwort. Ich nahm an, dass ich die Anweisung nicht auf den HTML-Code anwenden müsste, da er mit der Klasse verknüpft war.Ich habe die von Ihnen vorgeschlagene Methode hinzugefügt und es ergeben sich weitere Fehler. Ich denke, ich erkläre die Direktive nicht richtig in der App: Anders als ein Script-Tag in der index.html-Datei, dem Anweisungscode und der Referenz im Controller-HTML fehlt mir etwas? – JohnRobertPett

Welche anderen Fehler bekommen Sie? Anweisungen werden innerhalb des HTML-Tags angewendet, mit dem Sie sie verwenden möchten. Das ist der Punkt der Richtlinien. Das variable Element innerhalb der Direktive enthält dann einen Verweis auf das html Element – Dine

Diese: TypeError: Objekt [Objekt Objekt] hat keine Methode 'imagesLoaded' | TypeError: Objekt [Objekt Objekt] hat keine Methode 'Mauerwerk' | Uncaught TypeError: Kann die Methode 'create' von undefined nicht aufrufen – JohnRobertPett

Verwandte Themen