data-binding - ツールチップ/ライトボックスを表示する「角度のある」方法は何ですか?

Question

私は周りを見回してきましたが、次のことを達成する「角度のある」方法への明確な道筋を見つけることができませんでした。私が達成しようとしているのは、ng-repeat ループ内のリンクにカーソルを合わせると、情報を含むツールチップを表示することです。私の調査に基づいて、これはビューの一部であることがわかったので、おそらくディレクティブでこれを処理する必要があります。そこで、providertooltip という属性ディレクティブを作成しました。html 宣言は次のとおりです。

<table>
    <tr id="r1" ng-repeat="doc in providers">     
        <td>
            <a providertooltip href="#{{doc.Id}}" ng-mouseover="mouseOverDoc(doc)" ng-mouseleave="mouseLeave()">{{doc.FirstName}} {{doc.LastName}}</a> 
        </td>
    </tr>
</table
<div id="docViewer" style="display:hidden">
    <span>{{currentDoc.FirstName}} {{currentDoc.LastName}}</span>
</div>

モジュールでディレクティブを宣言し、ディレクティブ スコープで mouseOver 関数と mouseLeave 関数を宣言します。このアンカーはページのコントローラー スコープの子スコープであるため、イベントも「発行」します。コントローラーとしてルーターに渡されるコントローラー関数 (docTable ) で、イベントをリッスンします。部分的な実装を以下に示します。

app.directive("providertooltip", function() { 
  return {    
    restrict : 'A',        
    link: function link(scope, element, attrs) {
        //hover handler
        scope.mouseOverDoc = function(doc){
            scope.currentDoc = doc;
            scope.$emit('onCurrentDocChange');
            element.attr('title',angular.element('#docViewer').html());                    
            element.tooltipster('show');

           //docViewer
        };
         scope.mouseLeave = function() {
            element.tooltipster('hide');
        }
    }  
}});

function docTable(docFactory, $scope, $filter, $routeParams) {

    $scope.$on('onCurrentDocChange',function(event){
        $scope.currentDoc = event.targetScope.currentDoc;
        event.stopPropagation();
    });
}

わかりました、これが私の質問です。期待どおりのすべての作品。実はツールチップがうまく動かないので、divデータを簡単に表示できるツールチップライブラリをご存知の方がいらっしゃいましたら教えてください。しかし、私が本当に混乱しているのはバインディングです。タイトルを設定することで上記のツールチップを機能させることができました (デフォルトのツールチップの動作) が、最初にリンクにカーソルを合わせたときにバインディングがまだ発生していないことがわかります。onCurrentDocChange は同期していないと想定しているため、ツールチップが表示された後にバインドが発生します。別のリンクにカーソルを合わせると、前の情報が表示されます。前述したように、バインドは非同期で行われるためです。ツールチップを表示する行が呼び出されます。このパターンが頻繁に発生する必要があると想像する必要があります。1 つのスコープが、必ずしも同じスコープ内にあるとは限らない、ページの他の部分でバインディングをトリガーする必要があることを行います。あるスコープから別のスコープにデータを送信する方法が有効であることを誰かが最初に検証できますか? さらに、ビューに影響を与える前に、何かが「バインド」されるまでどのように待機しますか。コントローラーをビューと混在させれば簡単ですが、それは正しくありません。したがって、データをスコープにバインドするにはコントローラーが必要です。次に、データを含む要素の「ツールチップを表示」するビューが必要です。コメント? m あるスコープから別のスコープにデータを送信することは有効ですか? さらに、ビューに影響を与える前に、何かが「バインド」されるまでどのように待機しますか。コントローラーをビューと混在させれば簡単ですが、それは正しくありません。したがって、データをスコープにバインドするにはコントローラーが必要です。次に、データを含む要素の「ツールチップを表示」するビューが必要です。コメント? m あるスコープから別のスコープにデータを送信することは有効ですか? さらに、ビューに影響を与える前に、何かが「バインド」されるまでどのように待機しますか。コントローラーをビューと混在させれば簡単ですが、それは正しくありません。したがって、データをスコープにバインドするにはコントローラーが必要です。次に、データを含む要素の「ツールチップを表示」するビューが必要です。コメント?