从指令中的独立作用域获取作用域变量

Get Scope variable from isolated scope in directive

本文关键字：作用域获取变量独立指令更新时间：2023-09-26

我对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>

在两个驱动程序中将$rootScope.latitud的$scope.latitud更改为"活动"。你也可以制作

<label ng-model="data.latitud">LAT: {{longitude}}</label>
<button class="button button-positive" ng-click="doSubmit()>
    <span class="text-16">Submit</span>
  </button>
$scope.doSubmit = function(){
    alert($scope.data.latitud);
}