AngularJS में दोहराया तत्व आईडी कैसे सेट करें?

Question

मैं की तरह कुछ करने के लिए करना चाहते हैं: नियंत्रक में

<div class='row' ng-repeat='row in _.range(0,12)'> 
    <div id='{{row}}'></div> 
</div> 

लेकिन जब मैं कोशिश:

function SetterForCatanCtrl($scope) { 
    $scope._ = _; 
    try { 
     var tile = document.getElementById('5'); 
     tile.style.backgroundImage = "url('aoeu.png')"; 
    } catch (e) { 
     alert(e) 
    } 
} 

getElementById रिटर्न अकृत कैसे एक तत्व की आईडी AngularJS वैरिएबल का उपयोग कर सेट किया जा सकता?

Answer 1

फ़ंक्शन SetterForCatanCtrl केवल एक बार चलाया जाता है, जब कोणीय ngController निर्देशक को आपके ऐप को बूटस्ट्रैप करते समय निर्देश देता है। जब ऐसा होता है तो आप जिस तत्व को DOM से एक्सेस करना चाहते हैं वह अभी तक मौजूद नहीं है।

एक नियंत्रक से डीओएम हेरफेर एक अच्छा अभ्यास नहीं है, निर्देश आप जिस तरह की समस्या का सामना कर रहे हैं उसे हल कर सकते हैं। आपके उपयोग के मामले को सीएसएस के साथ हल किया जा सकता है और केवल वर्गों को स्विच किया जा सकता है लेकिन मुझे लगता है कि आप केवल पृष्ठभूमि छवि सेट करने से अधिक करना चाहते हैं।

एक नियंत्रक

आप कस्टम निर्देशों के लिए पूछ नहीं हैं, इसलिए एक त्वरित समाधान ngClick निर्देशों का उपयोग किया जाता है और एक विधि है कि छवियों

स्विच कर सकते हैं

उदाहरण HTML

<div ng-controller='ctrl'> 
    <div class='row' ng-repeat='row in _.range(0,12)'> 
     <div id='{{row}}' ng-click="click($index)"> 
      <button>{{row}}</button> 
     </div> 
    </div> 
</div> 

कह सकते हैं से

डोम हेरफेर

और जे एस

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

App.run(function($rootScope) { 
    $rootScope._ = _; 
}); 

App.controller('ctrl', function($scope){ 
    $scope.click = function(idx){ 
     var elem = document.getElementById(idx); 
     console.log('clicked row', idx, elem); 
    }; 
​}); ​ 

तो जब एक बटन क्लिक किया जाता है, आपको एक आईडी मिल जाएगी और डीओएम से तत्व प्राप्त करने के लिए इसका उपयोग किया जाएगा। लेकिन मुझे दोहराने दो, इस उपयोग के मामले में निर्देश एक बेहतर विकल्प है।

JSFiddle: http://jsfiddle.net/jaimem/3Cm2Y/

पीडी: अगर आप jQuery लोड आप डोम से तत्व का चयन करने के angular.element(<selector>) उपयोग कर सकते हैं।

---

संपादित करें: जोड़ने के निर्देश उदाहरण

डोम एक निर्देश

एक निर्देश का प्रयोग से हेरफेर, सरल है के बाद से आप सिर्फ तत्व निर्देश

लिए आवेदन किया है करने के लिए एक घटना बाध्य कर सकते हैं एचटीएमएल

<h1>Directive</h1> 
<div class='row' ng-repeat='row in _.range(0,12)'> 
    <div id='{{row}}' my-directive> 
     <button>{{row}}</button> 
    </div> 
</div> 

जेएस

App.directive('myDirective', function(){ 
    return function(scope, element, attr){ 
     element.bind('click', function(){   
      console.log('clicked element: ', element, element.html()); 
     }); 
    }; 
}); 

http://jsfiddle.net/jaimem/3Cm2Y/1/