角度指令中的关键字“this”

Question

我正在创建一个指令来显示 Google Maps API。

指令：

.directive('googleMaps', ["$cordovaGeolocation", function($cordovaGeolocation){
    return {
        restrict: 'E',
        scope: {},
        link: function($scope, element, attrs) {
            var options = {
                timeout: 10000,
                enableHighAccuracy: true
            };

            $cordovaGeolocation.getCurrentPosition(options).then(function(position){
                var latitude = position.coords.latitude,
                    longitude = position.coords.longitude;

                var latLng = new google.maps.LatLng(latitude, longitude);

                var mapOptions = {
                    center: latLng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(this, mapOptions);
            }).catch(function(error) {
                console.log(error);
            });
        }
    }
}]);

按照非常简单的教程（主要的教程是here）我创建了它。
在 google.maps.Map(...) 方法中，您会注意到它接受 2 个参数。
在教程中，这是您放置地图的 HTML 元素。
我想，既然使用了指令和restrict: 'E'，我可以将this 作为参数传递。
所以我的问题是：

• 我这样想对吗？
• 还有其他方法吗？ （我知道document.getElementById("google-maps")）
• this 在 Angular 指令中实际指的是什么？

注意：调试时this返回Window的实例

编辑：已尝试document.getElementsByTagName("google-maps")，但它甚至不起作用

Answer 1

由于google.maps.Map constructor 期望 HTML 元素（div 容器）映射对象可以通过element 参数在link 函数中实例化：

var map = new google.maps.Map(element[0]);

其中element[0]指的是当前HTML元素（链接函数中的element表示为jQlite object）

angular.module('myApp', [])
    .directive('map', function () {
        return {
            restrict: 'E',
            scope: {
                'options' : '='
            },
            link: function (scope, element, attrs) {
               
                var map = new google.maps.Map(element[0]);
                if (scope.options){
                   map.setOptions(scope.options);   
                }
        
            }
        };
    })
    .controller("MyCtrl", function ($scope) {

    });

#map_div {
        height: 400px;
        width: 660px;
        position:absolute;
       }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>



<div ng-app="myApp"  ng-controller="MyCtrl">
	<map id="map_div" zoom="12" options="{zoom: 10, center:{lat:59.9171469,lng:30.0442039}}"></map>
</div>

或通过attrs参数，例如：

var map = new google.maps.Map(document.getElementById(attrs.id));

其中attrs.id 指的是当前元素id

angular.module('myApp', [])
    .directive('map', function () {
        return {
            restrict: 'E',
            scope: {
                'options' : '='
            },
            link: function (scope, element, attrs) {
                
                var map = new google.maps.Map(document.getElementById(attrs.id));
                if (scope.options){
                   map.setOptions(scope.options);   
                }
        
            }
        };
    })
    .controller("MyCtrl", function ($scope) {

    });

#map_div {
        height: 400px;
        width: 660px;
        position:absolute;
       }

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>



<div ng-app="myApp"  ng-controller="MyCtrl">
	<map id="map_div" zoom="12" options="{zoom: 10, center:{lat:59.9171469,lng:30.0442039}}"></map>
</div>