Angularjs在获得指令中的输出后，将值分配给控制器

Angularjs assign value into controller after getting output in directives

本文关键字：分配 控制器 输出 指令 Angularjs      更新时间：2023-09-26

我对angularjs和谷歌地图很陌生，请帮帮我。

我的html文件：

<body ng-app="myApp" ng-controller="carLocationCtrl">
    <div my-map=""></div>
    <p>{{myCurrentPosition}}</p>
    <script type="text/javascript" src="E:'Projects'Angular Projects'angularmap.js"></script>
</body>

在这里，我想从指令中获得currentPosition的值，然后将该值传递或分配给我的控制器变量myCurrentLocation。然后只有我才能在<p>标记中显示该值。

我的控制器：

    var OEMControllers=angular.module('myApp',[]);
    OEMControllers.controller('carLocationCtrl', ["$scope", "$rootScope", function ($scope, $rootScope) {
    $scope.isEditLocation = false;
    $scope.myCurrentLocation='';
    $scope.saveCarLocation = function () {
        $scope.isEditLocation = true;
    };
    $scope.editCarLocation = function () {
        $scope.isEditLocation = false;
    };
    }]).directive('myMap', function() {
    var link = function(scope, element, attrs) {
        var map, infoWindow;
        var markers = [];
        // map config
        var mapOptions = {
            center: new google.maps.LatLng(50, 2),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };
        // init the map
        function initMap() {
            if (map === void 0) {
                map = new google.maps.Map(element[0], mapOptions);
            }
        }    
        // place a marker
        function setMarker(map, position) {
            var marker;
            var markerOptions = {
                position: position,
                center:position,
                map: map,
                icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
            };
            marker = new google.maps.Marker(markerOptions);
            markers.push(marker); // add marker to array
            //pan to marker..
            console.log('marker.getPosition() :: '+marker.getPosition());
             map.panTo(marker.getPosition());
            map.setZoom(16);
             console.log('pan called');
    //here i can able to get my currentPosition but how can i send this value to my controller .........
    scope.myCurrentLocation=marker.getPosition();
    console.log('output :: '+scope.myCurrentLocation);
        }
        // show the map and place some markers
        initMap();
        getLocation();
        var watchID=null;
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(onSuccess);
                /* var options = { timeout: 30000 };
                    watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);*/
        } else { 
                console.log('Not obtain geolocation');
        }
    }
    //geolocation succes..
        function onSuccess(position) {
            console.log('lat :: '+position.coords.latitude);
            console.log('long :: '+position.coords.longitude);

                setMarker(map, new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
                }
                function onError(error)
                {
                    console.log(error.message);
                }
    };
    return {
        restrict: 'A',
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link
    };
    });

我认为你的代码还可以，但在html中你使用了错误的变量名，如"myCurrentPosition"，我认为它可以与"myCurrentLocation"一起使用

  • 将值分配给scope对象。（我想你已经在代码中做到了）
  • angular使用级联/扩展作用域，因此在子元素中声明的任何控制器仍然可以读取您分配的值。您可以通过ng模型或ng绑定直接访问它们
  • 您可能想要实例化一个服务/值（singleton），并使指令和控制器都依赖于它。现在，所有依赖于该服务/值的人都可以访问您在指令中分配的值

在这里，您需要向"myMap"指令添加一个独立的作用域，并将"myCurrentLocation"从控制器引用到该指令，如下所示：

链接功能将返回如下：

return {
    restrict: 'A',
    template: '<div id="gmaps"></div>',
    replace: true,
    scope : {
        location : "="
    }
    link: link
};

在指令链接函数中，无论您在哪里更改标记位置，都会将该位置保存在指令范围内，如下所示。（请确保使用上面步骤中在隔离范围中使用的属性名称）：

scope.location=marker.getPosition();

你的html文件看起来像：

<body ng-app="myApp" ng-controller="carLocationCtrl">
    <div my-map="" location="myCurrentLocation"></div>
    <p>{{myCurrentLocation}}</p>
    <script type="text/javascript" src="E:'Projects'Angular Projects'angularmap.js"></script>
</body>
相关文章：