Question

如何通过单击按钮调用指令中的函数？我一直在努力想出这个（但它不起作用）：

HTML

<div ng-controller="myMapCTRL as myMapctrl">
        <div id="panel">
        <input ng-click="updateMap()" type=button value="Remove Path">          
        </div>
        <my-map-with-path id="map-canvas" class="map-canvas" ng-if="dataHasLoaded" ></my-map-with-path>
    </div>

控制器

app.controller('myMapCTRL', ['$scope', 'PathService', function($scope, PathService){
//console.log('in controller');
$scope.removed = false;
if(typeof $scope.paths ==='undefined') {
    $scope.dataHasLoaded = false;
    $scope.center = new google.maps.LatLng(51.5130300, -0.3202410);
    PathService.getPaths().then(function(data){
        $scope.paths = data;        
        $scope.dataHasLoaded = true;
        //console.log('paths loaded');
    });
};

}]);

指令

app.directive('myMapWithPath', [function() {



return{
    restrict: 'AE',
    template: '<div></div>',
    replace: true,      
    controller: 'myMapCTRL',        
    link: function(scope, element, attrs){
        //console.log('in link');
        scope.updateMap = function() {
            console.log('inside updateMap()');
        }


        var map, path = new google.maps.MVCArray(),
            service = new google.maps.DirectionsService(), poly;
        //var center = new google.maps.LatLng(51.5130300, -0.3202410);


        var myOptions = {
            zoom: 15,
            center: scope.center,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID,
                  google.maps.MapTypeId.SATELLITE]
            },
            disableDoubleClickZoom: true,
            scrollwheel: false,
            draggableCursor: "crosshair"
        }

        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        poly = new google.maps.Polyline({ map: map });



        for(var i = 0; i < scope.paths['j'].length; i++) {

            var lat = scope.paths['j'][i]['k']
            var lng = scope.paths['j'][i]['D']

            var lat_lng = new google.maps.LatLng(lat, lng);
            path.push(lat_lng);


        }

        poly.setPath(path);



        google.maps.event.addListener(map, "click", function(evt) {

            if (path.getLength() === 0) {
              path.push(evt.latLng);
              poly.setPath(path);
            } else {
                service.route({
                    origin: path.getAt(path.getLength() - 1),
                    destination: evt.latLng,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                }, function(result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        for (var i = 0, len = result.routes[0].overview_path.length;
                            i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                        }
                    }
                });
            }
            //console.log(path);
        });







    }

}


}]);

我想从按钮单击调用scope.updateMap，但它不会在控制台中触发。

Answer 1

这不起作用，因为ng-click在指令之外。

您应该将功能updateMap移至$scope的{{1}}

Answer 2

在挖掘一点之后，使用共享服务在控制器和指令之间进行通信似乎很正常。

一般的想法是：

<强> HTML

<div ng-controller="myMapCTRL as myMapctrl">
        <div id="panel">
        <input ng-click="updateMap()" type=button value="Remove Path">          
        </div>
        <my-map-with-path id="map-canvas" class="map-canvas" ng-if="dataHasLoaded" ></my-map-with-path>
    </div>

<强> SharedService

app.factory('mySharedService', function($rootScope) {
    var sharedService = {};

    sharedService.doSomething = function() {
        $rootScope.$broadcast('messageBroadcast');
    };

    return sharedService;
});

<强>控制器

app.controller('myMapCTRL', ['$scope', 'mySharedService', 
function($scope, sharedService){


$scope.updateMap = function() {     
    sharedService.doSomething();
}

}]);

<强>指令

app.directive('myMapWithPath', [function() {



return{
    restrict: 'AE',
    template: '<div></div>',
    replace: true,      
    controller: 'myMapCTRL',        
    link: function(scope, element, attrs){

        scope.$on('messageBroadcast', function() {
            console.log('in directive broadcast message');

        });         

        ...




    }

}


}]);

这个想法似乎是控制器在共享服务中调用一个“广播”消息的函数。该指令等待该消息，当它被接收时，它会做出令人惊奇的事情。

我不确定是否需要将共享服务注入指令或链接功能，但它似乎没有它。

如何从按钮单击调用指令中的函数

2 个答案: