एंजुलरजेस निर्देश

Question

से ट्रिगर पर क्लिक करें ट्रिगर मैं एंजुलरज निर्देश से अपनी अनुक्रमणिका निर्दिष्ट करने वाले ली तत्वों के लिए एक क्लिक ईवेंट कैसे ट्रिगर कर सकता हूं? मैंने पहले तत्व के लिए क्लिक ट्रिगर करने के लिए पहले $ का उपयोग करने का प्रयास किया है, लेकिन यह काम नहीं कर रहा है।

किसी भी मदद के लिए धन्यवाद।

Answer 1

यहां यह प्राप्त करने के लिए शायद एक अलग तरीका है। निर्देश दोनों सूचकांक और आइटम में पारित और निर्देश सेटअप एक टेम्पलेट में एचटीएमएल करते हैं:

डेमो: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

एचटीएमएल:

<ul id="thumbnails"> 
    <li class="thumbnail" ng-repeat="item in items" options='#my-container' itemdata='item' index="$index"> 

    </li> 
    </ul> 

js निर्देश:

app.directive('thumbnail', [function() { 
    return { 
    restrict: 'CA', 
    replace: false, 
    transclude: false, 
    scope: { 
     index: '=index', 
     item: '=itemdata' 
    }, 
    template: '<a href="#"><img src="{{item.src}}" alt="{{item.alt}}" /></a>', 
    link: function(scope, elem, attrs) { 
     if (parseInt(scope.index) == 0) { 
      angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'}); 
     } 

     elem.bind('click', function() { 
      var src = elem.find('img').attr('src'); 

      // call your SmoothZoom here 
      angular.element(attrs.options).css({'background-image':'url('+ scope.item.src +')'}); 
     }); 
    } 
} 
}]); 

शायद आप किसी अन्य उत्तर में इंगित छवि के रूप में छवि पर एक एनजी-क्लिक जोड़ने से बेहतर होगा।

अद्यतन

डेमो के लिए लिंक गलत था। इसे अद्यतन किया गया है: http://plnkr.co/edit/ybcNosdPA76J1IqXjcGG?p=preview

Answer 2

यह और अधिक यह करने के लिए कोणीय तरीका है: http://plnkr.co/edit/xYNX47EsYvl4aRuGZmvo?p=preview

1. मैं $ scope.selectedItem कि आप अपनी पहली समस्या (छवि दोषी) अतीत हो जाता है जोड़ा
2. मैं $ scope.setSelectedItem और कहा जाता है यह ng-click में है। आपकी अंतिम आवश्यकताओं अलग हो सकता है, लेकिन click बाँध और बदल src, overkill था के बाद से इसमें से अधिकांश टेम्पलेट के साथ ngSrc की
3. सूचना उपयोग प्रारंभिक लोड पर गुमराह सर्वर कॉल से बचने के लिए नियंत्रित किया जा सकता के लिए एक निर्देश का उपयोग कर
4. आप करेंगे div में सही छवि को स्थानांतरित करने के लिए कुछ शैलियों को समायोजित करने की आवश्यकता है। यदि आपको वास्तव में background-image का उपयोग करने की आवश्यकता है, तो आपको ngSrc जैसे निर्देश की आवश्यकता होगी जो वास्तविक डेटा लोड होने के बाद background-image शैली को सेट करने में विफल रहता है।

Answer 3

यह समस्या के निर्देश के दृष्टिकोण के साथ लैंगडन के उत्तर का एक विस्तार है। यदि आप पृष्ठ पर कई दीर्घाओं के लिए जा रहे हैं तो यह बिना किसी झगड़े के इसके बारे में जाने का एक तरीका हो सकता है।

उपयोग:

<gallery images="items"></gallery> 
<gallery images="cats"></gallery> 

See it working here

Answer 4

इस तरह मैं एक बटन क्लिक पृष्ठ लोड होने को गति प्रदान करने में सक्षम था है।

<li ng-repeat="a in array"> 
    <a class="button" id="btn" ng-click="function(a)" index="$index" on-load-clicker> 
    {{a.name}} 
    </a> 
</li> 

एक साधारण निर्देश है कि एनजी-दोहराने से सूचकांक लेता है और सूचकांक में पहला बटन फोन और इसे क्लिक करें पृष्ठ लोड होने के लिए एक शर्त का उपयोग करता है।

angular 
    .module("myApp") 
     .directive('onLoadClicker', function ($timeout) { 
      return { 
       restrict: 'A', 
       scope: { 
        index: '=index' 
       }, 
       link: function($scope, iElm) { 
        if ($scope.index == 0) { 
         $timeout(function() { 

          iElm.triggerHandler('click'); 

         }, 0); 
        } 
       } 
      }; 
     }); 

यह एकमात्र तरीका था जिसे मैं पहले स्थान पर स्वचालित रूप से ऑटो क्लिक को ट्रिगर करने में सक्षम था।angular.element(document.querySelector('#btn')).click(); नियंत्रक से काम नहीं किया है, इसलिए यदि आप पेज लोड पर क्लिक चलाने की कोशिश कर रहे हैं तो यह सरल निर्देश सबसे प्रभावी लगता है और आप इंडेक्स में गुज़रने के लिए कौन सा बटन क्लिक कर सकते हैं। मुझे किसी अन्य पोस्ट संदर्भ से इस स्टैक-ओवरफ्लो उत्तर के माध्यम से सहायता मिली: https://stackoverflow.com/a/26495541/4684183 ऑनलोडक्लिकर निर्देश।