CODEWITHSUNDEEP
androidangularjsurl-routinghref
khol75
khol75

Reputation: 41

Angular routing with href does not work on android browser

I'm getting puzzled by this.. I have this piece of code:

<a href=" #/products/{{product.id}}" ng-click="customFunction()">

Where product is an object with an 'id' element. Where customFunction adds the product in a shopping cart

Both are combined because the route in the href element permits to access a new page where the added product is customizable.

The code and the routing is working fine cross browser except on mobile phone (android at least, both chrome and native browser). On android phone only the ng-click reacts on click. But i am still able to open the web page routed by href by pressing the link and opening in a new tab :oO

my routing looks like that (app.js): 

    when('/products/:productId', {
                templateUrl: 'partials/store_composition.html',
                controller: 'mainCtrl'
            })

and in the main Ctrl is called the getProduct function: 

  if ($routeParams.productId != null) {
    $scope.product = $scope.store.getProduct($routeParams.productId);
}

which access the store.js file here : 

store.prototype.getProduct = function (id) {
for (var i = 0; i < this.products.length; i++) {
    if (this.products[i].id== id)
        return this.products[i];
}
return null;

}

And it works fine... Except on android!! but again the link exists if long pressed for new tab :s :s

Any idea?

Update: I am noticing that the URL in the navbar of android/chrome never changes. Contrarly of whats happening in regular browsers (an URL such as app/index.html#/products/batavia400 is updated on top) But except for the route i have linked in my post every other routing in my app are working (with no url update just the same... :/)

SOLVED: I actually solved the problem by adding the 

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

and its the user-scalable=nothat made the trick. The screen was slightly, really slightly zoomed by default by android, and this was creating the conflict on user's touch on the div's link. I guess if my web designing skills were better I wouldn't have had the problem ;)

Upvotes: 0

Views: 2389

Answers (1)

khol75
khol75

Reputation: 41

I actually solved the problem by adding the 

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

and its the user-scalable=nothat made the trick. The screen was slightly, really slightly zoomed by default by android, and this was creating the conflict on user's touching the div's link.

Upvotes: 1

Related Questions