Aggiunta Massoneria a angolare senza JQuery

io sto cercando di ottenere Masonry lavorare come una direttiva angolare, che è in parte documentato on-line, anche se sto avendo i seguenti problemi sul codice seguente:Aggiunta Massoneria a angolare senza JQuery

codice HTML:

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

codice direttiva angolare:

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

codice SCSS:

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

Poi anche, soprattutto, come i miei script sono stratificati nel mio file di indice:

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

Continuo a ricevere un errore nella console che suggerirebbe, non sto definendo la muratura da qualche parte in modo corretto:

Uncaught TypeError: Cannot call method 'create' of undefined

Poi anche:

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

qualcuno può vedere dove sto andando male?

Vorrei evitare di usare JQuery, probabilmente, poiché è disponibile una nuova Massoneria che non la usa.

fonte

2013-06-18 JohnRobertPett

Hai provato il caricamento di '' masonry.js' prima app.js' ? (Mettendo il suo tag '

Sembra che tu non stia effettivamente applicando la direttiva all'interno del tuo html.

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

Mi c'è voluto un po 'per rendere il lavoro degli isotopi nella mia app, fatemi sapere se questo aiuta e se l'errore si ricevono le modifiche.

Prova anche ad aggiungere la larghezza della colonna staticamente all'interno della tua direttiva per ora e guarda cosa succede. Il TypeError errore: L'oggetto [object Object] non ha un metodo 'muratura' potrebbe riguardare attrs.masonry:

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

fonte

2013-06-18 13:41:06 Dine

Grazie per la risposta. Supponevo che non avrei dovuto applicare la direttiva all'HTML poiché era collegata alla classe.Ho aggiunto il metodo suggerito e genera ulteriori errori. Penso di non dichiarare correttamente la direttiva nell'app: oltre a un tag di script nel file index.html, il codice di direttiva e il riferimento nel controller HTML mi manca qualcosa? – JohnRobertPett

quali altri errori stai ottenendo? Le direttive vengono applicate all'interno del tag html con cui si desidera utilizzarle. Questo è il punto delle direttive. l'elemento variabile all'interno della direttiva contiene quindi un riferimento a quell'elemento html – Dine

Questi: TypeError: Object [oggetto Object] non ha alcun metodo 'imagesLoaded' | TypeError: Object [oggetto Object] non ha alcun metodo 'masonry' | Uncaught TypeError: impossibile chiamare il metodo 'create' di undefined – JohnRobertPett

Problemi correlati