第一次单击时,地图不显示点

时间:2017-03-21 16:58:37

标签: angularjs html5 leaflet

这是我的问题 这是我的控制者:

    angular.module('app')
     .controller('HomeController', HomeController)

        function HomeController($state,$http,$scope){

        var vm = this;
        var mylist, lp;

        var showPoints = function(){
            $http.get('api/map').success(function(response){ 
                 mylist= response;
                 vm.selectList = mylist;
                 $scope.vm.objectSelected = mylist[0];
                 $scope.showCordinates($scope.vm.objectSelected );
        });
        }

        showPoints();

        $scope.showCordinates = function(obj){
            $scope.vm.objectSelected =obj;
            lp = obj.mynumber;
            $http.get('api/device/'+lp).success(function(response){
                    $http.get('api/provider/'+response.devId+'/'+obj._id).success(function(response){
                   $scope.vm.objectSelected.locations = response;

}

这是我的HTML代码:

<table class="table table-hover table-striped" style="margin-left:5px;">
        <thead>
            <tr>
                <th class="p-t-4"><h4>Serial Number</h4></th>
            </tr>        
        </thead>
        <tbody>
            <tr ng-class="{selected:vm.objectSelected===obj}" ng-repeat="obj in vm.selectList | filter:search" ng-click="showCordinates(obj)"> 
                <td>{{obj.mynumber}}</td>
            </tr>
        </tbody>
    </table>

<map object="vm.objectSelected" > </map>

预期的行为是,如果单击表格中列出的序列号,则必须刷新我的地图以根据clic(在预期位置)显示点。不幸的是,这就是我的应用程序发生的事情:如果我第一次点击序列号没有任何反应。我必须先点击另一个序列号,然后再次点击前一个序列号以刷新地图并显示其点数。 我不明白为什么会发生这个错误。 我的地图由传单库管理。

1 个答案:

答案 0 :(得分:0)

您的默认传单地图设置是什么?当我使用它时,我总是不得不延长&#34;我的控制器有一个默认的起点,有点像:

angular.module('app')
.controller('defaultmap',['$scope', '$http', 'leafletData', function($scope, $http, leafletData){

angular.extend($scope, {
    center: {
            lat: 27.4086665,
            lng: 1.7576433,
            zoom: 3
            },
    defaults: {
            scrollWheelZoom: false
            }
});

$scope.onloadMap = function() {
    $http.get('api/lib').success(function(data, status) {
        angular.extend($scope, {
            geojson: {
                data: data,
                style: function(feature){
                  var myStyles = {
                    fillColor: '#5e5e5e',
                    weight: 1,
                    opacity: 1,
                    color: 'white',
                    fillOpacity: 0.7
              }
          }
      }
    }
  )}
)}
}]);