2014-10-01 68 views
2

我已经将angular-google-maps(http://angular-google-maps.org/)与我的离子框架应用程序集成在一起了。一切工作都非常流畅,但我面临着infoWindow的一些问题。窗口正确显示,但在信息按钮里面的NG-click事件widnow不适合我的工作Angular Google Maps Info Window HTML

enter image description here

这是我在控制器代码

$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(); 
    }); 
    } 
}; 

这是视图

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

我想我错过了AngularJS的$ compile实现,但由于我是一个新手,我不知道如何使用它。

回答

4

后搜索的时间和命中和试验,Finalyl我已经GOR的解决方案。以下岗位帮助了很多aobut它

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

其实这个问题是信息窗口作为子控制器和我的机能的研究$ scope.confirmCode()为其父控制器的一部分。所以我做了两件事。

  1. 使用NG-斗篷信息窗口
  2. 使用ng-click="$parent.$parent.$parent.confirmCode()"

这里是更新的代码

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

在我的理解ng-non-bindable将导致角度忽略dom结构下的所有后续指令调用。在这种情况下,它会导致按钮(它将继承不可绑定)的ng单击被忽略,是否有一个原因,您使用过这个(我从来没有使用过这个指令)?

参考:https://docs.angularjs.org/api/ng/directive/ngNonBindable

+0

我已经删除NG-非绑定的,但仍然没有工作:( – casper123 2014-10-02 11:10:30

+0

我猜测它从来没有得到的console.log?窗口指令是否有一个onClick监听器也许这是阻止点击?总是可以尝试指针事件:如果是这样的话,没有关系?另外Ionic没有任何内置的点击拦截器? (我没有用过) – Swires 2014-10-02 11:30:46

0

这是你必须把你的代码出来的非绑定的意义内联模板和自己的模板中,并将它们包括在templateUrl中,使用templateParameters选项注入对象,并向模板添加新控制器。 http://angular-ui.github.io/angular-google-maps/#!/api

查看

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