Question

我仍然是Ionic和Angular的新手。我用一个指令来创建地图，它的工作正常。现在，在我的主视图中（附加了地图），我有一个提交按钮，用于将指令中的数据/变量和我视图中的数据发送到我的主控制器。我一直在网上搜索，不能找出正确的方法。我希望你能帮助我。

指令

angular.module('mase.directives', []).directive('map', ["MapService", function(MapService) {
    return {
        restrict: 'E',
        scope: {
            onCreate: '&'
            //geoloc: '@'
        },
        link: function ($scope, $element, $attr) {
            function initialize() {
                var mapOptions = {
                    // Set to Philippines
                    center: new google.maps.LatLng(14.6839606, 121.0622039),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                MapService.map = new google.maps.Map($element[0], mapOptions);

                MapService.marker = new google.maps.Marker({
                    map: MapService.map
                });

                $scope.onCreate({
                    map: MapService.map,         //link map to map in controller
                    marker: MapService.marker,   //link marker to marker in controller
                    geoloc: MapService.geoloc    //link geoloc to geoloc in controller
                });

                $scope.$parent.longitude = 'sample longitude';

                /*
                    console.log('MapService.map in directive', MapService.map);
                    console.log('MapService.marker in directive', MapService.marker);
                    console.log('MapService.geoloc in directive', MapService.geoloc);
                */

                // Stop the side bar from dragging when mousedown/tapdown on the map
                google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
                    e.preventDefault();
                    return false;
                });
            }

            if (document.readyState === "complete") {
                initialize();
            } else {
                google.maps.event.addDomListener(window, 'load', initialize);
            }
        }
    }
}]);

指令控制器

.controller('MapCtrl', ["$scope", "$ionicLoading", "MapService", function($scope, $ionicLoading, MapService) {
    $scope.mapCreated = function(map, marker, geoloc) {
        $scope.map = map;       //sets the map from the directive to the  $scope
        $scope.marker = marker; //sets the marker from the directive to the  $scope
        $scope.geoloc = geoloc; //sets the geoloc from the directive to the $scope
        console.log('$scope.geoloc in $scope.mapCreated', $scope.geoloc);
        $scope.centerOnMe();
    };

    $scope.centerOnMe = function () {
        console.log("Centering");
        if (!$scope.geoloc && !$scope.map && !$scope.marker) {
            console.log($scope.map);
            console.log($scope.marker);
            console.log($scope.geoloc);

            return;
        }

        $scope.loading = $ionicLoading.show({
            template: 'Getting current location...',
            noBackdrop: true
        });

        MapService.getCurrLoc($ionicLoading);
    };
}])

在我的主控制器中

.controller('Submit',function($scope,MapService) {
    $scope.doSubmit = function() {
        console.log($scope.longitude);
    }
})

在我的主要HTML

中

<ion-content>
    <form ng-submit="doSubmit()">
        <div class="list">
            <div class="item">
                <span class="input-label">Category&nbsp;<i class="ion-chevron-right"></i>&nbsp;Sub-category</span>
            </div>

            <ui-view name="incident-map"></ui-view>

            <label>LAT: {{longitude}}</label>
            <div class="item item-input item-stacked-label">  
                <span class="input-label">Description</span>
                <textarea style="margin-top: 0px; margin-bottom: 0px; height: 95px;"></textarea>
            </div>

            <div class="item item-button-right">
                <a href=""><i class="icon ion-android-camera text-24"></i></a>&nbsp;&nbsp;
                <a href=""><i class="icon ion-android-attach text-24"></i></a>
                <button class="button button-positive" type="submit">
                    <span class="text-16">Submit</span>
                </button>
            </div>
        </div>
    </form>
</ion-content>

Answer 1

将$scope.latitud的{{1}}更改为＆＃34;直播＆＃34;在两个司机内。你也可以

$rootScope.latitud

从指令中的隔离范围获取Scope变量

1 个答案: