लागू करने AngularJS उल्लू-हिंडोला

<div class="owl-carousel"> 
    <div ng-repeat="items in itemlist"> 
     <a href="series.html"><img ng-src="{{items.imageUrl}}" /></a> 
    </div> 
    <div> 
     <a href="series.html"><img src="http://placehold.it/350x150" /></a> 
    </div> 
</div>

देखें हिंडोला यहाँ करने के लिए एनजी-दोहराने: Owl-carousel2 लागू करने AngularJS उल्लू-हिंडोला

मैं एक मुद्दा जहां जब भी एनजी-दोहराने निर्देश आइटम का जायज़ा लागू किया जाता है में चल रहा हूँ जा रहा है के बजाय खड़ी खड़ी दिखती हैं क्षैतिज लेआउट।

यदि मैं एनजी-दोहराना छोड़ देता हूं और स्थिर वस्तुओं का उपयोग करता हूं तो यह काम करता है जैसा कि यह करना चाहिए।

क्या कोई निर्देश है जिसे मैं लेआउट को बनाए रखने के लिए उल्लू-कैरोसेल पर लिख सकता हूं और आवेदन कर सकता हूं?

कैरोलेल तोड़ने के कारण एनजी-दोहराने के बारे में क्या है?

क्या कोणीय कैरोसेल पर लागू उल्लू-कैरोसेल कक्षाओं को अलग कर रहा है?

नोट * मैन्युअल सूची का निर्माण तो के माध्यम से पुनरावृति और का उपयोग कर तत्वों संलग्न:

var div = document.createElement('div'); 
var anchor = document.createElement('a'); 
var img = document.createElement('img');    
.....  
carousel.appendChild(div);

तो owl.owlCarousel ({..}) यह काम करता है, यकीन नहीं करता है, तो यह सबसे अच्छा काम है फोन चारों ओर क्योंकि एनजी-दोहराना सबकुछ थोड़ा आसान बनाता है।

मैंने एक हैक की खोज की, अगर मैं एक टाइमआउट में उल्लू init लपेटता हूं तो ng-repat works।

setTimeout(function(){ 
     ...call owl init now 
},1000);

<link rel="stylesheet" href="css/owl.carousel.css"/> 
<link rel="stylesheet" href="css/owl.theme.default.min.css"/> 

..... 
    <script src="/js/lib/owl.carousel.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       var owl = $('.owl-carousel'); 
       owl.owlCarousel({ 
       ..... 
       }); 
       owl.on('mousewheel', '.owl-stage', function(e) { 
       if (e.deltaY > 0) { 
        owl.trigger('next.owl'); 
       } else { 
        owl.trigger('prev.owl'); 
       } 
       e.preventDefault(); 
       }); 
      }) 

     </script>

स्रोत

2015-01-16 Fabii

उल्लू कैरोसेल लोड करने के लिए आप किस कोड का उपयोग कर रहे हैं? यह लगभग निश्चित रूप से लोड ऑर्डर समस्या है। यानी एनजी-दोहराने से उल्लू कैरोसेल ने कैरोसेल को इसके बाहर बनाने से पहले डीओएम में हेरफेर नहीं किया है। – rwacarter

@Rwacarter मैंने जो सामग्री जोड़ा है उसे देखें – Fabii

@rwcarter मैं वास्तव में इस मुद्दे को कैसे प्राप्त करूं? – Fabii

यह ही पृष्ठ पर एकाधिक carousels के साथ काम कर पाने के लिए एक और post पर DTing से एक निर्देश संशोधित करने में सक्षम था:

मेरी नियंत्रक में मैं कुछ इस तरह था। यहां एक काम plnkr

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

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.items1 = [1,2,3,4,5]; 
    $scope.items2 = [1,2,3,4,5,6,7,8,9,10]; 
}).directive("owlCarousel", function() { 
    return { 
     restrict: 'E', 
     transclude: false, 
     link: function (scope) { 
      scope.initCarousel = function(element) { 
       // provide any default options you want 
       var defaultOptions = { 
       }; 
       var customOptions = scope.$eval($(element).attr('data-options')); 
       // combine the two options objects 
       for(var key in customOptions) { 
        defaultOptions[key] = customOptions[key]; 
       } 
       // init carousel 
       $(element).owlCarousel(defaultOptions); 
      }; 
     } 
    }; 
}) 
.directive('owlCarouselItem', [function() { 
    return { 
     restrict: 'A', 
     transclude: false, 
     link: function(scope, element) { 
      // wait for the last item in the ng-repeat then call init 
      if(scope.$last) { 
       scope.initCarousel(element.parent()); 
      } 
     } 
    }; 
}]);

यहाँ एचटीएमएल

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> 
    <script data-require="[email protected]" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav : false}"> 
     <div owl-carousel-item="" ng-repeat="item in ::items1" class="item"> 
     <p>{{::item}}</p> 
     </div> 
    </data-owl-carousel> 
    <data-owl-carousel class="owl-carousel" data-options="{navigation: false, pagination: true, rewindNav : false}"> 
     <div owl-carousel-item="" ng-repeat="item in ::items2" class="item"> 
     <p>{{::item}}</p> 
     </div> 
    </data-owl-carousel> 
    </body> 

</html>

स्रोत

2015-04-16 21:22:01 JKOlaf

आपके उत्तर के लिए धन्यवाद। यह बहुत अच्छा है।तथ्य यह है कि आखिरी वस्तु को लूप किया जाना चाहिए और फिर कैरोसेल शुरू करना, एसिंक घटनाओं/बाहरी सामग्री को लोड करने पर एक बड़ा अंतर बनाता है। – msaad

उल्लू डॉट्स को इस – devanathan

का उपयोग करके प्रदर्शित नहीं किया गया था यदि मेरे सरणी में प्रत्येक आइटम एक अलग GET अनुरोध है और प्रत्येक प्रतिक्रिया के बाद 'if (scope। $ Last) 'सत्य है तो मुझे क्या करना चाहिए? सभी आइटम कैरोसेल के बाहर हैं, यह कैसे तय किया जा सकता है? – FireBrand

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

स्रोत

2015-01-16 20:02:26

मैंने अलग-अलग निर्देशों के साथ झुकाव करने की कोशिश की लेकिन मुझे यह पता लगाने तक कोई भाग्य नहीं था, यह एक हैक फिक्स का थोड़ा सा हो सकता है, लेकिन फिर भी यह काम करता है।

<div ng-repeat="item in mediaitems"> 
    <img ng-src="item.imageurl" /> 
</div>

$ scope.mediaitems ajax कॉल का उपयोग कर उत्पन्न होता है:

यहाँ मेरी div सेटअप है। मैंने पाया कि अगर मैंने उल्लू प्रारंभिकता में देरी की जब तक कि मेरी सूची पॉप्युलेट नहीं हुई थी, तो यह इसे ठीक से प्रस्तुत करेगी। साथ ही यदि आप तय करते हैं कि आप अपडेट करना चाहते हैं तो आप गतिशील रूप से सूची को सूचीबद्ध करने के बाद बस सेटअप कैरोसेल फ़ंक्शन (नीचे देखें) पर कॉल करें और यह कैरोसेल को दोबारा लगाएगा।

ध्यान दें कि कैरोसेल इनिट एक अज्ञात फ़ंक्शन के भीतर बाहरी फ़ाइल में है। यही वह तरीका है जिसे मैंने इसे सेट अप करने का विकल्प चुना है, आप अपने ऑनलाइन हो सकते हैं या फिर आप कृपया।

$scope.populate = function(){ 
    $timeout(function(){ 
     $scope.mediaitems = returnedlist; //list of items retrun from server 
     utils.setupcarousel();    //call owl initialization 
    }); 
};

var utils = (function(){ 
    var setupcarousel = function(){ 
     console.log('setting up carousel..'); 
     var owl = $('.owl-carousel'); 
     if(typeof owl.data('owlCarousel') != 'undefined'){ 
      owl.data('owlCarousel').destroy(); 
      owl.removeClass('owl-carousel'); 
     } 

     owl.owlCarousel({ 
      loop: false, 
      nav: true, 
      margin: 10, 
      responsive: { 
       0: {items: 3 }, 
       600: {items: 5}, 
       960: { items: 8}, 
       1200:{items: 10}, 
       1600:{items: 12} 
      } 
      }); 
    }; 

    return{ 
     .... 
    } 

})();

स्रोत

2015-02-11 20:22:34 Fabii

मेरे पास एक बहुत ही समान समस्या है, और यहां आपका दृष्टिकोण अल बनाता है मुझे समझ में आता है। हालांकि, यह पंक्ति "owl.data ('उल्लू कैरोसेल')। नष्ट();" काम नहीं करता - यह मुझे बता रहा है कि यह "अपरिभाषित" की संपत्ति को हटा नहीं सकता है। मदद? – Jonathan

कभी नहीं, समस्या मिली! किसी भी कारण से, रेखा "अगर (टाइपऑफ owl.data ('उल्लू कैरोसेल')! = 'अपरिभाषित')" मेरे लिए अपरिभाषित वस्तुओं को नहीं पकड़ रहा था, इसलिए इसके बजाय मैंने इसे "var owlData = owl.data (' owlCarousel ') "अगर पहले, और फिर" अगर (owlData === अपरिभाषित) "और यह एक आकर्षण की तरह काम किया। धन्यवाद! – Jonathan

यह वही जवाब के रूप में JKOlaf ने उल्लेख किया है। हालांकि मैंने इसके लिए उत्तरदायी व्यवहार जोड़ा है जो बेहतर यूएक्स प्रदान करता है। 2 प्रमुख सुधार: 1. पूरी तरह उत्तरदायी कोड विभिन्न उपकरणों में बेहतर यूएक्स का परिणाम देता है। 2. "ऑटोहेइट" संपत्ति को अब संभाला जाता है जिसके परिणामस्वरूप छवियों का छोटा थंबनेल होता है।

कोड नीचे चला जाता है:

\t 
 
Was able to modify a directive from DTing on another post to get it working with multiple carousels on the same page. Here is a working plnkr 
 

 
-- Edit -- Have another plnkr to give an example on how to add an item. Doing a reinit() did not work cause any time the owl carousel is destroyed it loses the data- elements and can never initialize again. 
 

 
var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.items1 = [1,2,3,4,5]; 
 
    $scope.items2 = [1,2,3,4,5,6,7,8,9,10]; 
 
}).directive("owlCarousel", function() { 
 
    return { 
 
     restrict: 'E', 
 
     transclude: false, 
 
     link: function (scope) { 
 
      scope.initCarousel = function(element) { 
 
       // provide any default options you want 
 
       var defaultOptions = { 
 
       }; 
 
       var customOptions = scope.$eval($(element).attr('data-options')); 
 
       // combine the two options objects 
 
       for(var key in customOptions) { 
 
        defaultOptions[key] = customOptions[key]; 
 
       } 
 
       defaultOptions['responsive'] = { 
 
        0: { 
 
         items: 1 
 
        }, 
 
        600: { 
 
         items: 3 
 
        }, 
 
        1000: { 
 
         items: 6 
 
        } 
 
       }; 
 
       // init carousel 
 
       $(element).owlCarousel(defaultOptions); 
 
      }; 
 
     } 
 
    }; 
 
}) 
 
.directive('owlCarouselItem', [function() { 
 
    return { 
 
     restrict: 'A', 
 
     transclude: false, 
 
     link: function(scope, element) { 
 
      // wait for the last item in the ng-repeat then call init 
 
      if(scope.$last) { 
 
       scope.initCarousel(element.parent()); 
 
      } 
 
     } 
 
    }; 
 
}]);

आप अपने आवश्यकता के अनुसार उत्तरदायी आइटम गणना बदल सकते हैं। छवियों के बड़े थंबनेल के लिए इसे एक छोटे से मूल्य पर सेट करें। आशा है कि यह किसी और की मदद करेगा और मूल उत्तर प्रदाता के लिए धन्यवाद।

स्रोत

2017-05-25 09:14:00 Dash

ऐसा कुछ ऐसा हो सकता है जो नेस्टेड एनजी-स्टेटमेंट्स के साथ किया जा सकता है, मेरे पास एम्बेड करने के साथ-साथ चित्रों की एक सरणी के लिए वीडियो की एक श्रृंखला है। जब आप 'स्कोप' का मूल्यांकन कर रहे हों तो यह उल्लू हो जाता है जब आप उल्लू कर रहे हैं। $ अंतिम ' –

क्या आप वास्तविक कोड साझा करना चाहते हैं? – Dash

https://stackoverflow.com/questions/45594682/owl-carousel-populated-my-multiple-ng-repeats –

लागू करने AngularJS उल्लू-हिंडोला

उत्तर

संबंधित मुद्दे