Question

我想为此指令中的每个div添加一个唯一ID，以便我可以指定google maps应该传递的元素：

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

您可以使用指令范围的唯一ID。

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

scope.$id返回一个唯一的数字，对每个范围实例单调增加。

＆＃39; ::＆＃39;如果使用角度1.3或更高版本，则使用一次性绑定。

请参阅Angular scope documentation

Answer 2

不引入大量额外代码的简单解决方案是使用Date.now()

会生成例如：1397123701418

Answer 3

添加一个负责返回唯一ID的服务。

示例：

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

    var nextId = 1;

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

然后只需将此服务注入您的指令并调用它以获取唯一ID：

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

如何为指令的每个实例添加唯一ID？

3 个答案: