Wie können Sie jeder Instanz einer Anweisung eine eindeutige ID hinzufügen?

Question

Ich mag eine eindeutige ID zu jedem div in dieser Richtlinie hinzuzufügen, so dass ich mit welchem ​​Elemente angeben kann, dass Google Maps passieren sollte:

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

Sie können die eindeutige ID des Geltungsbereichs der Richtlinie verwenden.

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

scope.$id Rückkehr eine eindeutige Nummer, die für jede Instanz Umfang monoton erhöhen.

Das '::' soll die einmalige Bindung verwenden, wenn Sie angular 1.3 oder höher verwenden.

Siehe Angular scope documentation

Answer 2

einen Dienst hinzufügen, die eindeutige ID der verantwortlich ist zurückzukehren.

Beispiel:

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

    var nextId = 1; 

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

Und dann einfach diesen Service in Ihre Richtlinie injiziert und nennt es eine eindeutige ID zu erhalten:

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

Eine einfache Lösung nicht ein Bündel von zusätzlichem Code einzuführen, ist zu verwenden, nur Date.now()

zum Beispiel erzeugen würde: 1397123701418