Wie lösen Sie ein Nachladen in Mauerwerk aus?

Question

Ich habe Maurerarbeit in meiner AngularJS App mit der angular-masonry Direktive arbeiten, aber ich möchte in der Lage sein, eine Funktion oder Methode in meinem Controller aufzurufen, die ein Neuladen von Objekten im Container auslösen wird. Ich sehe im Quellcode (Zeilen 101-104) eine Reload-Methode, aber ich weiß nicht, wie ich das aufrufen soll. Irgendwelche Ideen?

Danke!

Answer 1

Ich denke nicht, dass Sie die reload() -Methode direkt auslösen können, da es Teil des Controllers ist, der nur innerhalb der Direktiven sichtbar ist.

Sie können entweder ...

A) Trigger ein Neuladen direkt von Mauerwerk über das Element, jQuery-Stil

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

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

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

B) oder erweitern Sie die Anweisungen selbst, dh fügen Sie die erforderlichen Uhren auf Mauerwerk Ziegel hinzu und rufen Sie die Methode reload() auf (hängt davon ab, welchen Anwendungsfall Sie haben).

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

In dem Codeblock oben habe, habe ich einfach eine Uhr auf dem Elemente mit der Klasse ‚Mauerwerk-Ziegel‘, um einen erneuten Laden von Mauerwerk auszulösen, wenn die Höhe Elemente ändert.

Ich habe ein jsFiddle zum Testen von Eckverkleidungen von Passys selbst entwickelt, bitte schauen Sie es sich an!

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

EDIT:

Nur eine ähnliche Position auf Stackoverflow gefunden, die eine andere Lösung für dieses Problem sein könnte:

AngularJS Masonry for Dynamically changing heights

Answer 2

Falls es in Zukunft jemand Nutzungs ist Passy schaut auf eine Veranstaltung namens maurery.reload.

So können Sie dieses Ereignis und Passy 'Layout' auf dem Mauerwerk Element, z.

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

rufen In meinem Fall hatte ich einige von Drittanbietern javascript meine Ziegel schmücken, so musste ich neu aufgebaut, nachdem das geschehen war. Aus Gründen (ich konnte nicht herausfinden warum), musste ich die Ereignisübertragung in eine Zeitüberschreitung bringen, ich denke, dass der Passy-Scheduler das Ereignis auffrischte und nicht neu strich. Z.B. Ich tat:

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

Auf diese Weise müssen Sie Passy nicht direkt ändern.

Answer 3

Die Antwort von @SebastianRiemer hat mir geholfen.

Aber für zukünftige Personen, die stattdessen die Hilfe benötigen, versuchen die

folgende verwenden

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