iPad上でのAngularJSを利用したバインディングで勝手にtel型リンクにされる時の対応

🗓️ 2016-01-13

📑 Post

環境

単純化すると下記たいなコード

# app.js
app.controller('AppCon', function ($scope) {
        $scope.data = 123;
    });

# index.html
<div>
    <span>{{data}}</span>
</div>

iPadにビルドして表示すると勝手にハイパーリンクにされた上に電話先の番号がめちゃめちゃにはいってた。

<span><a href="tel:123456789" x-apple-data-detectors="true" x-apple-data-detectors-type="telephone" x-apple-data-detectors-result="0">123</a></span>

html metaを追加することで解決した。

#index.html
<head>
    <meta name="format-detection" content="telephone=no" />
</head>

<div>
    <span>{{data}}</span>
</div>

🏷️ #AngularJS