Как добавить уникальный идентификатор к каждому экземпляру директивы?

Я хочу добавить уникальный идентификатор для каждого div в этой директиве, чтобы я мог указать, какой элемент должен пройти карта google:

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)    
        },
    };
}).

Ответ 1

Вы можете использовать уникальный идентификатор области действия.

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

scope.$id возвращает уникальный номер, который монотонно увеличивается для каждого экземпляра области.

"::" - использовать одноразовую привязку, если вы используете angular 1.3 или новее.

См. Angular документация по областям

Ответ 2

Простое решение не вводить кучу дополнительного кода - просто использовать Date.now()

Будет генерировать, например: 1397123701418

Ответ 3

Добавьте службу, которая отвечает за возврат уникальных идентификаторов.

Пример:

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)    
        },
    };
}).