आप कोणीय-चिनाई में एक रीलोड कैसे ट्रिगर करते हैं?

Question

मैं angular-masonry निर्देशों का उपयोग मेरी AngularJS अनुप्रयोग में काम करने के लिए चिनाई मिला लेकिन मैं अपने नियंत्रक में एक समारोह या विधि है कि कंटेनर में मदों की एक पुनः लोड ट्रिगर किया जाएगा कॉल करने के लिए सक्षम होना चाहते हैं। मैं स्रोत कोड (लाइन 101-104) में देखता हूं, वहां एक रीलोड विधि है लेकिन मुझे यकीन नहीं है कि इसे कैसे आमंत्रित किया जाए। कोई विचार?

धन्यवाद!

Answer 1

मुझे नहीं लगता कि आप फिर से लोड() विधि सीधे ट्रिगर कर सकते हैं, क्योंकि यह नियंत्रक जो निर्देशों के भीतर ही दिखाई दे रहा है का हिस्सा है।

आप या तो हो सकता है ...

ए) ट्रिगर तत्व, jQuery शैली के माध्यम से एक बार पुनः लोड करने चिनाई का सीधे

(http://jsfiddle.net/riemersebastian/rUS9n/10/ देखें):

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

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

बी) या निर्देशों का विस्तार करें, यानी चिनाई-ईंट पर आवश्यक घड़ियों को जोड़ें और पुनः लोड() विधि को कॉल करें (आपके उपयोग के मामले पर निर्भर करता है)।

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

ऊपर कोड ब्लॉक में, मैं बस एक घड़ी वर्ग की चिनाई की ईंटों से 'के साथ तत्व पर आदेश जब भी तत्वों' ऊंचाई में परिवर्तन चिनाई का एक पुनः लोड को गति प्रदान करने में जोड़ दिया है।

मैं passys 'परीक्षण के लिए एक jsFiddle बना लिया है कोणीय चिनाई अपने आप को, चेक करें के लिए स्वतंत्र महसूस!

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

संपादित करें:

बस stackoverflow पर एक समान पद जो इस समस्या का एक समाधान हो सकता है पाया:

AngularJS Masonry for Dynamically changing heights

Answer 2

मामले में यह भविष्य में किसी से उपयोग की है , Masonry.reload नामक एक घटना के लिए Passy घड़ियों।

तो, आप इस घटना को जारी कर सकते हैं और पैसी चिनाई तत्व है, उदा पर 'लेआउट' बुलाना चाहिए

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

फोन मेरे मामले में, मैं कुछ तृतीय-पक्ष जावास्क्रिप्ट मेरी ईंटों सजा था, इसलिए मैं के बाद से किया गया था कि फिर से रंगना की जरूरत है। कारण के लिए (मैं यह समझने में सक्षम नहीं था), मुझे टाइमआउट में ईवेंट प्रसारित करने की ज़रूरत थी, मुझे लगता है कि पैसी शेड्यूलर घटना को खा रहा था और पुनर्भुगतान नहीं कर रहा था। जैसे मैंने किया:

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

इस तरह आपको सीधे पैसी को संशोधित करने की आवश्यकता नहीं है।

Answer 3

@SebastianRiemer से जवाब मुझे मदद की।

लेकिन भविष्य व्यक्तियों कि बजाय कोशिश का उपयोग करने में मदद की जरूरत है के लिए निम्नलिखित

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