Come si può aggiungere un ID univoco a ciascuna istanza di una direttiva?

Question

Voglio aggiungere un ID univoco a ciascun div nella presente direttiva, in modo che possa specificare quale elemento che google maps dovrebbero passare:

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

È possibile utilizzare l'ID univoco dell'ambito della direttiva.

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

scope.$id ritorno un numero univoco monotonicamente aumentano per ogni istanza ambito.

Il campo "::" consente di utilizzare l'associazione una tantum se si utilizza la versione 1.3 o successiva.

Vedi Angular scope documentation

Answer 2

aggiungere un servizio che si occupa di restituire id uniche.

Esempio:

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

    var nextId = 1; 

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

E poi semplicemente iniettare questo servizio nella vostra direttiva e chiamare per ottenere un ID univoco:

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

Una soluzione semplice per non introdurre un po 'di codice aggiuntivo è utilizzare solo Date.now()

genererebbe per esempio: 1397123701418