角ng-单击在ng-map指令中的异常之后不工作。

Question

我在一个模式中使用ng-map (http://ngmap.github.io/)在我的应用程序中为googlemap服务，但是在该指令中出现异常后，我在页脚中的关闭按钮将无法工作。当我将这个关闭按钮放在指令之前(例如，在标题中)，它可以工作！我应该如何捕捉这样的异常并保持控制？

我的模式是：

 <script type="text/ng-template" id="views/OfficeMapModal.html">
        <div class="modal-header">
            <div class="modal-title">{{address}}</div>
        </div>
        <div class="modal-body">
            <ng-map zoom="15" center="{{center.latitude}}, {{center.longitude}}">
                <marker position="{{center.latitude}}, {{center.longitude}}"></marker>
            </ng-map>
        </div>
        <div class="modal-footer">
            <div class="btn btn-default select-again" data-ng-click="cancel()">close</div>
        </div>
 </script>

我的模态控制器也是这样：

angular.module('portalApp').controller('GoogleMapModalController', ['$scope', 'NgMap', '$uibModalInstance', 'address', 'center', function ($scope, NgMap, $uibModalInstance, address, center) {
$scope.address = address;

$scope.center = center;

NgMap.getMap().then(function (map) {
    google.maps.event.trigger(map, 'resize');
    var myLatLng = new google.maps.LatLng(center.latitude, center.longitude);
    map.setCenter(myLatLng);
});

$scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
};}]);

编辑：

错误: google未定义为t@components/ngmap/build/scripts/ng-map.min.js:1:2423

Answer 1

您正在调用getMap()方法，因此如果它在该方法中的任何地方失败而没有处理错误，则执行将不会继续。这意味着$scope.cancel甚至不会被宣布。

如果您期望在这个库中或者特别是在调用getMap()过程中出现错误，那么理想情况下，您应该尝试解决这些错误。但是，在由于无法控制的条件而无法解决错误的情况下，保持cancel按钮工作的最简单的解决方案是将$scope.cancel声明移至NgMap初始化的上方，在调用周围放置一个try捕获，并输出错误详细信息：

    angular.module('portalApp').controller('GoogleMapModalController', ['$scope', 'NgMap', '$uibModalInstance', 'address', 'center', function ($scope, NgMap, $uibModalInstance, address, center) {
    $scope.address = address;

   $scope.center = center;

   $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };

   try { // safely attempt to initialize 
      NgMap.getMap().then(function (map) {
         google.maps.event.trigger(map, 'resize');
         var myLatLng = new google.maps.LatLng(center.latitude, center.longitude);
         map.setCenter(myLatLng);
      });
   } catch(err) { } // out put error
   }]);