Angular - 将 ng-init 从视图传输到控制器答案

【问题标题】：Angular - transmit ng-init from view to controllerAngular - 将 ng-init 从视图传输到控制器
【发布时间】：2016-07-16 09:43:38
【问题描述】：

我以这种方式持有 ng-init：

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

这是我的控制器：

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);
            }
        }
    });

我想将 ng-init 传输到我的控制器中。你有什么想法吗？

【问题讨论】：

标签： javascript angularjs ng-init

【解决方案1】：

很简单：

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

当然还要从 HTML 中删除它：

<div class="map-content" style="min-height: 200px">
    <div map-marker ng-model="data" class="demo-map"></div>
</div>

【讨论】：

angular.js:114TypeError: 无法读取此行中未定义的属性“纬度”：var myPosition = new google.maps.LatLng(scope.myModel.latitude, scope.myModel.longitude);

【解决方案2】：

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) {
}
}
});

【讨论】：