Ionic-framework: ng-click not working on android device and emulator.

Created on 17 Jul 2014 · 4Comments · Source: ionic-team/ionic-framework

The ng-click to center the map on current position is not working.

<html ng-app="ionic.example">
<head>
    <meta charset="utf-8">
    <title>Map</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <!--<script src="js/controllers.js"></script>-->
    <!--<script src="js/services.js"></script>-->
</head>

<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
    <h1 class="title">Map</h1>

</ion-header-bar>
<ion-content scroll="false" >
    <div id="map" ></div>
    <button ng-click="centerOnMe();$event.stopPropagation()">Find Me1 </button>
</ion-content>
<ion-footer-bar overflow-scroll="true" class="bar-dark">
    <button ng-click="centerOnMe();$event.stopPropagation();event.preventDefault(); ">Find Me </button>

</ion-footer-bar>
</body>
</html>

the controller app.js

angular.module('ionic.example', ['ionic'])

    .controller('MapCtrl', function($scope, $ionicLoading, $compile) {
        function initialize() {
            var myLatlng = new google.maps.LatLng(12.07493,78);

            var mapOptions = {
                center: myLatlng,
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
                mapOptions);

            //Marker + infowindow + angularjs compiled ng-click
            var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
            var compiled = $compile(contentString)($scope);

            var infowindow = new google.maps.InfoWindow({
                content: compiled[0]
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Uluru (Ayers Rock)'
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

            $scope.map = map;
        }
        google.maps.event.addDomListener(window, 'load', initialize);

        $scope.centerOnMe = function() {
            if(!$scope.map) {
                return;
            }

//            $scope.loading = $ionicLoading.show({
//                content: 'Getting current location...',
//                showBackdrop: false
//            });

            navigator.geolocation.getCurrentPosition(function(pos) {
                                                     console.log(pos);
                $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                //$scope.map.setCenter(new google.maps.LatLng(12, 79));
                //$scope.loading.hide();
                //$ionicLoading.hide();
            }, function(error) {
                alert('Unable to get location: ' + error.message);
            });
        };

        $scope.clickTest = function() {

            alert('Example of infowindow with ng-click')
        };

    });

The stylesheet.

#map {
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}

Source

imtiyaj

Most helpful comment

I tried with data-tap-disabled="true" but it didn't work

evba1 on 4 Mar 2016

👍4

All 4 comments

Hey @imtiyaj give data-tap-disabled="true" a shot
http://ionicframework.com/docs/api/page/tap/

perrygovier on 21 Jul 2014

@imtiyaj, did data-tap-disable work for you?

mhartington on 22 Jul 2014

Thank you. It worked.

On Wed, Jul 23, 2014 at 3:19 AM, Mike Hartington [email protected]
wrote:

@imtiyaj https://github.com/imtiyaj, did data-tap-disable work for you?

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic/issues/1796#issuecomment-49806057.

Regards,
Imtiyaj
Founder-Director
Ariem Technologies Pvt Ltd.