Angular ng-click does not work after an exception in a ng-map directive

Question

I used ng-map (http://ngmap.github.io/) in a modal to serve googlemap in my application, but after an exception in that directive my close button in the footer wont work. When I put that close button before the directive(for example in header) it works! How should I catch such exceptions and keep the control?

my modal is as bellow:

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

and my modal controller is as bellow:

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

Edit:

Error: google is not defined t@http://localhost:3000/bower_components/ngmap/build/scripts/ng-map.min.js:1:2423

The fact that the app doesn't work as expected after an exception sounds pretty normal to me... Have you tried avoiding this exception or catching it ? — LoremIpsum, Feb 23 '16 at 11:24
I edited the question and added the exception. My problem is with the ng-map directive inside my modal not. — Pooya, Feb 23 '16 at 11:32

score 0 · Answer 1 · answered Feb 23 '16 at 11:25

0

You are calling the method getMap() so if it fails anywhere in that method with out handling errors the execution will not continue. This would mean that the $scope.cancel will not even be declared.

If you are expecting errors in this library or specifically in the process of calling getMap(), ideally you should try to resolve these errors. But the simplest solution to keep the cancel button working in circumstances where you are not able to resolve the errors due to uncontrollable conditions is to move the $scope.cancel declaration above the NgMap initialization, put a try catch around the call and output the error details:

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

answered Feb 23 '16 at 11:25

Saleh

150
10

The problem is not in the controller. It occurs in the modal right after compiling ng-map directive – Pooya Feb 23 '16 at 11:33
Have you tried wrapping the NgMap initialization around a try catch, you may be able to prevent the directive from failing on the page still giving you a working cancel button, it will just probably not display the full directive elements I guess. – Saleh Feb 23 '16 at 12:09
I removed the NgMap.getMap block from controller and as I told before it is related to ng-map in html – Pooya Feb 23 '16 at 12:25
I don't know anyway of catching or recovering from errors on html page even if they are angular directive tags. I think the underlying problem is somewhere in the controller still or angular itself (not continuing page down from a failure in the directive) because this sort of scenario should not happen on a web page. Sorry I can't be of anymore help on this. One last check is do you get any error at all in the console? – Saleh Feb 23 '16 at 13:06
I would also try coding the modal without the script tag because that is angular running and rendering html in that piece of code. Try raw html to rule out the issue been script tag with type text/ng-template. – Saleh Feb 23 '16 at 13:20
Thanks for your helps. yes I get "google is not defined t@http://localhost:3000/bower_components/ngmap/build/scripts/ng-map.min.js:1:2423" – Pooya Feb 23 '16 at 13:22

Angular ng-click does not work after an exception in a ng-map directive

1 Answers1