简体   繁体   中英

Angular - transmit ng-init from view to controller

I hold ng-init in my view in this way :

                    <div class="map-content" style="min-height: 200px">
                        <div ng-init="data = {latitude : 35.757563, longitude: 51.409469}">
                            <div map-marker ng-model="data" class="demo-map"></div>
                        </div>
                    </div>

And here is my controller :

app.controller('mapController' , function($scope) {})
    .directive('mapMarker',function(){
        return {
            restrict: 'EA',
            require: '?ngModel',
            scope:{
                myModel: '=ngModel'
            },
            link: function(scope , element, attrs , ngModel) {

                scope.mapData = {};
                scope.mapData.latitude = attrs.latitude;
                scope.mapData.longitude = attrs.longitude;
                console.debug(scope.myModel);
                var mapOptions;
                var googleMap;
                var searchMarker;
                var searchLatLng;

                ngModel.$render = function(){
                    searchLatLng = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);

                    mapOptions = {
                        center: searchLatLng,
                        zoom: 12,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    googleMap = new google.maps.Map(element[0],mapOptions);

                    searchMarker = new google.maps.Marker({
                        position: searchLatLng,
                        map: googleMap,
                        draggable: true
                    });

                    google.maps.event.addListener(searchMarker, 'dragend', function(){
                        scope.$apply(function(){
                            scope.myModel.latitude = searchMarker.getPosition().lat();
                            scope.myModel.longitude = searchMarker.getPosition().lng();
                        });
                    }.bind(this));

                };

                scope.$watch('myModel', function(value){
                    var myPosition = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);
                    searchMarker.setPosition(myPosition);
                }, true);
            }
        }
    });

I want to transmit ng-init into my controller. Do you have any idea about it?

Quite simple:

app
    .controller('mapController', function($scope) {
        $scope.data = {
            latitude: 35.757563,
            longitude: 51.409469
        };
    })
    .directive('mapMarker', function() {
        // ...
    });

And remove it from HTML of course:

<div class="map-content" style="min-height: 200px">
    <div map-marker ng-model="data" class="demo-map"></div>
</div>
myApp.controller('mapController' , function($scope) {
                $scope.$watch('data', function(value){
                    console.log(value);
                }, true);
})
    .directive('mapMarker',function(){
        return {
            restrict: 'EA',
            require: '?ngModel',
            scope:{
                myModel: '=ngModel',
                data:'=data'
            },
            link: function(scope , element, attrs , ngModel) {
}
}
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM