javascript - 在 Controller 中，如何在指令中初始化对象

Question

这是我第一次使用 AngularJS 和 GoogleMap。 在我的程序中，我想在我的GoogleMap上的当前位置设置一个标记，下面的代码是我如何使用指令来初始化 map (基本上来自互联网)

app.directive("appMap", function () {
    return {
        restrict: "E",
        replace: true,
        template: "<div></div>",
        scope: {
            center: "=",        // Center point on the map (e.g. <code>{ latitude: 10, longitude: 10 }</code>).
            markers: "=",       // Array of map markers (e.g. <code>[{ lat: 10, lon: 10, name: "hello" }]</code>).
            width: "@",         // Map width in pixels.
            height: "@",        // Map height in pixels.
            zoom: "=",          // Zoom level (one is totally zoomed out, 25 is very much zoomed in).
            mapTypeId: "@",     // Type of tile to show on the map (roadmap, satellite, hybrid, terrain).
            panControl: "@",    // Whether to show a pan control on the map.
            zoomControl: "@",   // Whether to show a zoom control on the map.
            scaleControl: "@"   // Whether to show scale control on the map.
        },
        link: function (scope, element, attrs) {
            var toResize, toCenter;
            var map;
            var currentMarkers;
            // update the control
            function updateControl() {

                // update size
                if (scope.width) element.width(scope.width);
                if (scope.height) element.height(scope.height);

                // get map options
                var options =
                {
                    center: new google.maps.LatLng(-42, 171),
                    zoom: 6,
                    mapTypeId: "roadmap"
                };
                if (scope.center) options.center = getLocation(scope.center);
                if (scope.zoom) options.zoom = scope.zoom * 1;
                if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId;
                if (scope.panControl) options.panControl = scope.panControl;
                if (scope.zoomControl) options.zoomControl = scope.zoomControl;
                if (scope.scaleControl) options.scaleControl = scope.scaleControl;

                // create the map
                map = new google.maps.Map(element[0], options);

以下内容是我的 Controller

app.controller("appCtrl", function ($scope) {

    // current location
    $scope.loc = { lat: -42, lon: 171 };
    $scope.zoom = 6;   
    $scope.gotoCurrentLocation = function () {
        var c = $scope.getCurrentLoc();
        alert(c.latitude + "    " + c.longitude);
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var c = position.coords;
                $scope.gotoLocation(c.latitude, c.longitude);
           });
            return true;
       }
        return false
    };

    $scope.gotoLocation = function (lat, lon) {
        if ($scope.lat != lat || $scope.lon != lon) {
            $scope.loc = { lat: lat, lon: lon };
            //$scope.zoom = 14;
            //if (!$scope.$$phase) $scope.$apply("loc", "zoom");
            if (!$scope.$$phase) $scope.$apply("loc");
        }
    };

现在，我有一个触发 gotoCurrentLocation() 的底部，我想做的是在当前位置添加一个标记。因此，在 Controller 中，我认为我需要获取指令中初始化的 map 对象，然后为其添加标记。有没有办法做到这一点，实际上我不确定这是否是正确的方法。

我还想了一些其他的办法。例如，将 getCurrentPosition 放在一个单独的函数中，并将该函数传递给指令，并在那里设置标记。

请各位 friend 提供帮助，谢谢。

Answer 1

您可以在指令上创建一个属性，例如 onInit ，并从 Controller 传递一个函数，该函数将在初始化时接收 map 对象。

app.directive("appMap", function () {
    return {
        restrict: "E",
        replace: true,
        template: "<div></div>",
        scope: {
            center: "=",        // Center point on the map (e.g. <code>{ latitude: 10, longitude: 10 }</code>).
            markers: "=",       // Array of map markers (e.g. <code>[{ lat: 10, lon: 10, name: "hello" }]</code>).
            width: "@",         // Map width in pixels.
            height: "@",        // Map height in pixels.
            zoom: "=",          // Zoom level (one is totally zoomed out, 25 is very much zoomed in).
            mapTypeId: "@",     // Type of tile to show on the map (roadmap, satellite, hybrid, terrain).
            panControl: "@",    // Whether to show a pan control on the map.
            zoomControl: "@",   // Whether to show a zoom control on the map.
            scaleControl: "@",  // Whether to show scale control on the map.
            onInit: '&'         //This function would run when your map is initialized
        },
        link: function (scope, element, attrs) {
            var toResize, toCenter;
            var map;
            var currentMarkers;
            // update the control
            function updateControl() {

                // update size
                if (scope.width) element.width(scope.width);
                if (scope.height) element.height(scope.height);

                // get map options
                var options =
                {
                    center: new google.maps.LatLng(-42, 171),
                    zoom: 6,
                    mapTypeId: "roadmap"
                };
                if (scope.center) options.center = getLocation(scope.center);
                if (scope.zoom) options.zoom = scope.zoom * 1;
                if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId;
                if (scope.panControl) options.panControl = scope.panControl;
                if (scope.zoomControl) options.zoomControl = scope.zoomControl;
                if (scope.scaleControl) options.scaleControl = scope.scaleControl;

                // create the map
                map = new google.maps.Map(element[0], options);
                scope.onInit(map);