2016-07-16 37 views
1

我在我看来这种方式举行NG-INIT:角 - 从视图发送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); 
      } 
     } 
    }); 

我想要传送纳克-init进入我的控制器。你有什么想法吗?

回答

0

很简单:

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

angular.js:114TypeError:不能在这行读取未定义 财产 '纬度' :var myPosition = new google.maps.LatLng(scope.myModel.latitude,scope.myModel.longitude); – AFN

0
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) { 
} 
} 
}); 
相关问题