निर्देश के प्रत्येक उदाहरण में आप एक अद्वितीय आईडी कैसे जोड़ सकते हैं?

Question

मैं इस निर्देश में प्रत्येक div करने के लिए एक अद्वितीय ID को जोड़ने के लिए है, ताकि मैं क्या तत्व निर्दिष्ट कर सकते हैं कि गूगल मैप्स पास करना चाहिए हैं:

directive('gMap', function(googleMaps){ 
return{ 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: "<div id="{{unique_ID}}"></div><div ng-transclude></div>", 
     scope: true, 
     link: function(scope, element, attrs){ 


      //create the map 
      var center = googleMaps.makePosition(attrs.centerlat, attrs.centerlong) 
      //update map on load 
      var options = googleMaps.setMapOptions(center, attrs.zoom); 
      scope.map = googleMaps.createMap(options, unique_id)  
     }, 
    }; 
}). 

Answer 1

आप निर्देश के दायरे की अद्वितीय आईडी का उपयोग कर सकते हैं।

<div id="gMap-{{::$id}}"></div><div ng-transclude></div> 

scope.$id एक अद्वितीय संख्या है होगा- प्रत्येक गुंजाइश उदाहरण के लिए वृद्धि वापसी।

यदि आप कोणीय 1.3 या बाद में उपयोग करते हैं तो '::' एक बार बाध्यकारी का उपयोग करना है।

Angular scope documentation देखें

Answer 2

एक सेवा है जो विशिष्ट आईडी के वापस जाने के लिए जिम्मेदार है जोड़ें।

उदाहरण:

angular.module("app").service("UniqueIdService", function(){ 

    var nextId = 1; 

    this.getUniqueId = function(){ 
     return nextId++; 
    } 
}); 

और फिर बस अपने निर्देश में इस सेवा इंजेक्षन और इसे कहते में एक विशिष्ट आईडी प्राप्त करने के लिए:

directive('gMap', function(googleMaps, UniqueIdService){ 
return{ 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: "<div id="{{unique_ID}}"></div><div ng-transclude></div>", 
     scope: true, 
     link: function(scope, element, attrs){ 
      scope.unique_ID = UniqueIdService.getUniqueId(); 

      //create the map 
      var center = googleMaps.makePosition(attrs.centerlat, attrs.centerlong) 
      //update map on load 
      var options = googleMaps.setMapOptions(center, attrs.zoom); 
      scope.map = googleMaps.createMap(options, scope.unique_ID)  
     }, 
    }; 
}). 

Answer 3

एक सरल समाधान अतिरिक्त कोड का एक समूह है परिचय नहीं करने के लिए बस Date.now()

उपयोग करने के लिए उदाहरण के लिए उत्पन्न होगा: 1397123701418