Angular Google Maps Info Window HTML

Question

I've integrated angular-google-maps ( http://angular-google-maps.org/ ) with my ionic framework application.. Everything is working really smooth but I'm facing some problems with infoWindow.. The window shows up correctly but the ng-click event inside a button on info widnow doesn't work for me

Here is my code in controller

$scope.confirmCode = function() {
  console.log("sdf");
  if(confirm("Are you sure?"))
  {
    Category.getCode(window.localStorage.getItem('user_place'), 0,     $stateParams.position_id, $scope.point_id, $scope.currentUser.id, function(data) {
      $scope.code = data.data[0];
      $scope.pointsModal.show();
    });
  }
};

This is the view

<div class="map-show col">
      <google-map draggable="true" center="map.center" zoom="map.zoom">
          <markers models="locations" coords="'self'" icon="'icon'" click="'onClick'">
            <windows show="show">
              <div ng-non-bindable>{{heading}}<br/>{{address}}<br/><button ng-click="confirmCode()">Redeam</button></div>
            </windows>              
          </markers>
      </google-map>
    </div>

I think I'm missing something realted to $compile of AngularJS but as I'm a newbie I'm not sure how to use it.

Answer 1

After hours of searching and hit and trials, Finalyl I've gor the solution. The following post helped a lot aobut it

https://github.com/angular-ui/angular-google-maps/issues/356#issuecomment-50513058

Actually the problem is infoWindow acts as child controller and my fuction $scope.confirmCode() was a part of its parent controller. So I did two things.

1. Use ng-cloak with infoWindow
2. use ng-click="$parent.$parent.$parent.confirmCode()"

Here is the updated code

<div class="map-show col">
      <google-map draggable="true" center="map.center" zoom="map.zoom">
          <markers models="locations" coords="self" icon="icon" click="onClick">
            <windows show="'show'" ng-cloak>
              <div>{{heading}}<br/>{{address}}<br/><a href="" ng-click="$parent.$parent.$parent.confirmCode()">Redeam</a></div>
            </windows>              
          </markers>
      </google-map>
    </div>

Answer 2

In my understanding ng-non-bindable will cause angular to ignore all subsequent directive calls further down the dom structure. In this case it will be causing the ng-click on the button (which will inherit the non-bindable) to be ignored, is there a reason that you've used this (I've never used that directive myself)?

Reference: https://docs.angularjs.org/api/ng/directive/ngNonBindable

Answer 3

It's non-bindable meaning that you have to take your code out of the inline template, and in their own templates and include them templateUrl, inject your object with a templateParameters option, and add a new controller to the templates. http://angular-ui.github.io/angular-google-maps/#!/api

View

 <windows show="show" templateUrl="'abspath/to/yourTemplate.html'" templateParameter="yourDataObject">
 </windows>  

yourTemplate.html

<div ng-controller="yourTemplateController">{{heading}}<br/>{{address}}<br/><button ng-click="confirmCode()">Redeem</button></div>

yourTemplateController

angular.module('yourApp').controller('yourTemplateController', function ($scope) {
    $scope.confirmCode = function() {
      console.log("sdf");
      if(confirm("Are you sure?"))
      {
        Category.getCode(window.localStorage.getItem('user_place'), 0,     $stateParams.position_id, $scope.point_id, $scope.currentUser.id, function(data) {
          $scope.code = data.data[0];
          $scope.pointsModal.show();
        });
      }
    };
});