Come si avvia una ricarica in muratura angolare?

Question

Ho ottenuto che la muratura funzionasse nella mia app AngularJS usando la direttiva angular-masonry ma voglio essere in grado di chiamare una funzione o un metodo nel mio controller che attiverà una ricarica di elementi nel contenitore. Vedo nel codice sorgente (righe 101-104) c'è un metodo di ricarica ma non sono sicuro di come farlo. Qualche idea?

Grazie!

Answer 1

Non penso che sia possibile attivare direttamente il metodo reload(), poiché fa parte del controller che è visibile solo all'interno delle direttive.

Si potrebbe o ...

A) grilletto una ricarica direttamente in muratura attraverso l'elemento, jQuery stile

(vedi http://jsfiddle.net/riemersebastian/rUS9n/10/):

$scope.doReloadRelatively = function(e) { 
    var $parent = $(e.currentTarget).parent().parent(); 
    $parent.masonry(); 
} 

$scope.doReloadViaID = function() { 
    $('#container').masonry(); 
} 

B) o estendi le direttive tu stesso, cioè aggiungi gli orologi necessari su mattoni in muratura e chiama il metodo reload() all'interno (dipende da quale caso d'uso hai).

.directive('masonryBrick', function masonryBrickDirective() { 
    return { 
    restrict: 'AC', 
    require: '^masonry', 
    scope: true, 
    link: { 
     pre: function preLink(scope, element, attrs, ctrl) { 
     var id = scope.$id, index; 

     ctrl.appendBrick(element, id); 
     element.on('$destroy', function() { 
      console.log("masonryBrick > destroy") 
      ctrl.removeBrick(id, element); 
     }); 

     scope.$watch(function() { 
      return element.height(); 
     }, 
     function (newValue, oldValue) { 
      if (newValue != oldValue) {      
       console.log("ctrl.scheduleMasonryOnce('layout');"); 
       ctrl.scheduleMasonryOnce('layout'); 
      } 
     } 
    ); 
     ... 

Nel blocco di codice di cui sopra, ho semplicemente aggiunto un orologio sull'elemento con la classe 'in muratura di mattoni' al fine di innescare un ricaricamento della muratura ogni volta che cambia l'altezza degli elementi.

Ho creato un jsFiddle per testare la muratura angolare di passy, ​​sentitevi liberi di verificarlo!

http://jsfiddle.net/riemersebastian/rUS9n/10/

EDIT:

appena trovato un post simile su StackOverflow che potrebbe essere un'altra soluzione a questo problema:

AngularJS Masonry for Dynamically changing heights

Answer 2

Nel caso è utile a qualcuno in futuro , Passy guarda per un evento chiamato masonry.reload.

Quindi, è possibile emettere questo evento e Passy dovrebbe chiamare "layout" sull'elemento in muratura, ad es. chiamare

$rootScope.$broadcast('masonry.reload'); 

Nel mio caso, ho avuto un po 'di terze parti javascript decorare i miei mattoni, quindi avevo bisogno di ridisegnare dopo che è stato fatto. Per ragioni (non ero in grado di capire perché), avevo bisogno di avvolgere l'evento trasmesso in un timeout, penso che lo schedulatore Passy stesse mangiando l'evento e non ridipingendo. Per esempio. Ho fatto:

$timeout(function() { 
    $rootScope.$broadcast('masonry.reload'); 
    }, 5000); 

In questo modo non è necessario modificare Passy direttamente.

Answer 3

La risposta di @SebastianRiemer mi ha aiutato.

Ma per le persone che hanno bisogno di aiuto futuri provare invece utilizzare il seguente

scope.$watch(function() { 
    return element.height(); 
}, 
function (newValue, oldValue) { 
    if (newValue != oldValue) { 
     ctrl.scheduleMasonryOnce('reloadItems'); 
     ctrl.scheduleMasonryOnce('layout'); 
    } 
});