Angular Scope 外の HTML を Angular Scope に入れる

　最近、ある旧 Page を Angular を使っている新しい Page に入れたかったのですが、Angular の Bootstrap は HTML を入れる前に行われていて、Scope が使われてないことがありました。
　まぁ、解決にはそんなに難しくないですが、解決のプロセスが面白いから、メモしておこう。
　まず、angular.element を取得します。その後、injector を取得して、$compile を変数に保存します。
     var compile = angular.element(ele).injector().get("$compile")
     これで、$compileProvider で作成した $compile 関数が取得できました。
　その後、HTML String を $compile に当てて、Scope を利用して、リンクした HTML を該当場所に入れます。
　compile(angular.element(ele).scope())
    最後に、Scope の $digest を呼び出すために、$apply() 関数を呼び出す。終わり。

　Angular は自分の実行サイクルがあるので、その外で生成した HTML はそのサイクルに入らないので、これを入れるために $apply を利用します。ーーまたは $timeout を使います。（実際、$timeout の中に $rootScope.$apply() が呼び出されています。）

　短くいうと、HTML String を Angular の世界に入れるため、$compile を使います。$compile 関数は Link 関数を返しますので、link はある Scope をベースに実際の Angular の世界に入る HTML String を返されます。その後、$apply で $digest を呼び出して、一回 Angular の世界をリフレッシュします。
　
　愚痴：1.0.8 に ng-if がないので、作ろうかなと思ってますけど、、、否決されました。しばらく ng-switch を使う予定です。1.2 を使いたいな〜。

iOS 7 Safari リンク ２回クリック問題

　今日新しい問題を発見しました。以前はこのようなサイトを作ってなかったから、わからなかったが、iOS 7 から :hover クラスの中に display と visibility があれば、一回目の touch は hover 状態にして、２回目のタッチは実際のリンクに行きます。。。
　調べてみたら、どうやら iOS 7 からいろいろ変わってきました。
　　ios-has-a-hover-problem
　
　具体的に言うと、以前の Touch Device では、:hover クラスを無視しましたが、iOS 7 からは
   div span {display:none}
   div:hover span {display: block}
みたいな動作を見逃さないように、一回目のタッチを :hover にして、つまり span を表示させて、このとき、click イベントがトリッガーしません。２回目のタッチで、click になります。。。
　これは困ったな〜
　ネットでは :hover を no-touch クラスをつけて、タッチデバイスではなければ、no-touch を外すという直す方法がありますが、個人では、display:none の要素を opacity で隠したりしたほうがいいかもしれません。
　まぁ、まだいろいろ試しているところ。。。また後日追記します。
　それでは。