角度放置功能

Question

我在我的项目中使用angular-google-maps 库。我使用指令加载自定义谷歌地图菜单。目标显然是重用该指令。菜单中有几个按钮，单击它们应该都执行一个功能。我仍在努力解决如何做到这一点，所以这是我的问题：

我想在单击“主页”按钮时将地图平移到其原始位置。通常这只是通过 ng-click 完成，并且该函数被放置在控制器的范围内。我对指令感到困惑。我应该在哪里放置“home()”函数？指示？指令控制器？控制器？我希望这有意义吗？！？！

HTML：

<div class="map_canvas">
                    <google-map center="map.center" zoom="map.zoom" draggable="true">

                        <marker ng-repeat="m in map.markers" coords="m" icon="m.icon" click="onMarkerClicked(m)">
                            <marker-label content="m.name" anchor="50 0" class="marker-labels"/>
                            <window ng-cloak  coords="map.center" isIconVisibleOnClick="false" options="map.infowindows.options">
                                    <p>This is an info window at {{ m.latitude | number:4 }}, {{ m.longitude | number:4 }}!</p>
                                    <p class="muted">My marker will stay open when the window is popped up!</p>
                            </window>

                        </marker>


                        <map-custom-control position="google.maps.ControlPosition.TOP_CENTER" control-template="../templates/gmaps/main_menu.html" control-click=""></map-custom-control>


                    </google-map>
                </div>

模板：

<div  class="gmaps-menu">

    <div class="gmaps-row">
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_020_home.png" ng-click="home()"></button>
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_349_fullscreen.png"></button>
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_096_vector_path_polygon.png"></button>
        <button type="button" class="btn btn-default"><img class="glyphicon-custom" src="../img/icons/glyphicons/glyphicons_030_pencil.png"></button>
    </div>

</div>

指令：

AppDirectives.directive('mapCustomControl', ['$log', '$timeout', '$http', '$templateCache', 'google', 'GMapsLib' ,function ($log, $timeout, $http, $templateCache, google,GMapsLib) {



    return {
        restrict: 'E',
        replace: true,
        require: '^googleMap',
        link: function(scope,element,attr,mapCtrl){

        if (!angular.isDefined(attr.controlTemplate)) {
            $log.error('map-custom-control: could not find a valid control-template property!');
            return;
        }

        var templateUrl = attr.controlTemplate;

        var position = google.maps.ControlPosition.TOP_CENTER;
        if (angular.isDefined(attr.position)) {
            var EVAL_IS_OK_WE_CONTROL_THE_INPUT = eval;
            position = EVAL_IS_OK_WE_CONTROL_THE_INPUT(attr.position);
        }



        $timeout(function() {

            var map = mapCtrl.getMap();

            var controlDiv = document.createElement('div');
            controlDiv.style.padding = '5px';
            controlDiv.style.width = 'auto';
            controlDiv.marginLeft = 'auto';
            controlDiv.marginRight = 'auto';
            $http.get(templateUrl, {cache: $templateCache})
                .success(function(html) {
                    controlDiv.innerHTML = html;
                })
                .then(function (/*response*/) {
                    map.controls[position].push(controlDiv);
                    if (angular.isDefined(attr.controlClick)) {
                        google.maps.event.addDomListener(controlDiv, 'click', function() {
                            scope.$apply(attr.controlClick);
                        });
                    }
                }
            );
        });
    }
    };

}]);

Answer 1

您可以传递必须在控制器上执行的作用域函数：

HTML

<div ng-app="app" ng-controller="sampleCtrl">
    <maps-custom-control click-handler="alertMe()"></maps-custom-control>
</div>

JS

var app = angular.module('app', []);

app.directive('mapsCustomControl', function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            clickHandler: '&'
        },
        template: '<div style="width: 100px; height:100px; background-color: red;" ng-click="clickHandler()"></div>'
    };
});


app.controller('sampleCtrl', function ($scope) {
    $scope.alertMe = function () {
        window.alert('Refresh gMaps control');
    };
});

既然我们传递了 alertMe 函数，这就是将被执行的函数，我希望这有意义吗？

Fiddle

对你的代码的一个小说明，如果你得到如下模板会更好：

app.directive('..', function() {
   return {
      template: '<div ng-include="getTemplate()"></div>',
      link: function(scope, element, attr) {
         scope.getTemplate = function() {
            return this.attr.controlTemplate;
         }
      }
   };
});

这样你就不需要做任何奇怪的 ajax 调用了。只需在模板中添加所有标记并包含它。不要让它变得困难:-)