无法更新angular.js中的变量

时间:2014-10-01 03:17:19

标签: javascript angularjs cordova angularjs-scope ionic-framework

我正在使用angular.js构建一个Ionic应用程序,我差不多完成了,但现在我遇到了一个小麻烦。

templates/menu.html我有:

<ion-item nav-clear menu-close ng-click="filterByPeriod(weekBegin, currentDate)">Filter  </ion-item>

和我的controller.js:

.controller('Home', ['$scope', '$ionicModal', '$cordovaGeolocation', function($scope, $ionicModal, $cordovaGeolocation) {
  App = {
    init: function() {
      setTimeout(function(){
        $scope.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      }, 200);
    },
  };
  $scope.addMarkersToMap = function(reports, map) {
    var newCenter = new google.maps.LatLng(reports[0].latitude, reports[0].longitude);

    map.setCenter(newCenter);
    map.setZoom(12);
  }

  $scope.filterByPeriod = function(beginDate, endDate) {
    var cityId = window.localStorage.getItem('cityId');

    serviceReports.getDenunciasFromPeriod(cityId, beginDate, endDate)
    .success(function(reports){
      $scope.addMarkersToMap(reports.dados, $scope.map);
    });
  }
  App.init();
}]);

我已经尝试用一个封装了这个方法的`$ scope.apply(function(){})来做这个但是我用这两种方法来捕捉这个错误:

http://cl.ly/image/200O1d2F1C46

任何人都知道如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

$ scope.map未定义。可能是您没有从谷歌地图库中获取任何内容,或者它还没有填充数据。您可能希望使用promise然后使用该变量或禁用该按钮,直到数据存在。

答案 1 :(得分:0)

您的地图对象未正确初始化。我怀疑你的document.getElementById(&#34; map-canvas&#34;)在控制器中不能正常工作:DOM操作不与角度摘要周期同步。

首选使用指令,你可以看看我是如何做到的:

https://github.com/bennekrouf/ng-formation/blob/master/app-directives/app/app.js