在 ng-map 指令中出现异常后，Angular ng-click 不起作用

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@http://localhost:3000/bower_components/ngmap/build/scripts/ng-map.min.js:1:2423

Answer 1

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

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

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