javascript - AngularJS の 2 つの異なるコントローラーにディレクティブを適用できない

Question

フィドラーリンク

Tippy ライブラリを使用して HTML ツールチップを作成しています。ティッピー ツールチップを処理するために 2 つのディレクティブを作成しました。

.directive('settings', function() {
    return {
      templateUrl: 'tippy-template.html'
    };
  })
  .directive('tippy', function() {
    return function (scope) {
      tippy('.tippy', {
           position: 'bottom',
           animation: 'shift',
           arrow: true,
           interactive: true,
           arrowSize: 'big',
           distance: 20,
           html: document.getElementById('setting-template'),
           appendTo: document.getElementById('settings-controller')
      })
    };
  })

settingsディレクティブには HTML ツールチップ コードが含まれており、ディレクティブtippyは HTML ツールチップ コードに配置されてアクティブになります。tippy ツールは、それが入っているコントローラーとデータを共有します。この例では、キャッシュを共有します。

tippy Fiddler 1 controllerのインスタンスが 1 つしかない場合は、すべて正常に動作します。ディレクティブを再び使用することはできません。私が抱えている問題、Fiddler 2 controllers linkを再現することができました。

私の理解でTippyは、一意の ID がある場合にのみ使用できます。これを解決する方法はありますか？

tippy-template.html

<div id="setting-template" tippy>
   <ul class="collection">
     <li class="collection-item">
       <div class="col-title"><b>{{title}}</b></div>
       <div class="col-title">Cache</div>
       <div class="col-item">
         <div class="switch">
           <label>Off
                <input ng-model="cache" type="checkbox"><span class="lever"></span> On
           </label>
         </div>
       </div>
     </li>
     <li class="collection-item">
       <div class="col-title"><b>Cache Result</b></div>
       <div class="col-item">{{cache}}</div>
    </li>
  </ul>
</div>

ディレクティブの使用法 (コントローラー内)

<div id="settings-controller" settings></div>