0

わかりましたので、jQuery Tipsy のディレクティブを作成しました。希望どおりに機能していますが、タイトルに少し問題がありました。選択したオプション（ドロップダウン）に応じて、タイトルを埋めたり、空白にしたりしたいので、非常に動的です。私は何かを使っていますng-attr-titleが、それは一度しか仕事をしていないようです。
これが私の指示です：

.directive('ngxTipsy', function() {
    // jQuery Tipsy Tooltip
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            // possible directions:
            // nw | n | ne | w | e | sw | s | se
            element.tipsy({ 
                delayIn:0, 
                delayOut:0, 
                gravity: attrs.ngxTipsy, 
                opacity: 1, 
                html: true
            });
        }
    }
})

サンプルの HTML コードを次に示します。

<select name="type" class="form-control" ng-model="mytype">
    <option value="type1">Type 1</option>   
    <option value="type2">Type 2</option>
</select>

<input type="number" name="price" ngx-tipsy="s" ng-attr-title="{{ (mytype == 'type1') ? 'some title' : '' }}" ng-model="myprice">

初めて type2 を選択すると、ツールチップのタイトルに何も表示されず、 type1 を選択するとtitle属性が入力されます...これは正しいです...しかし、後で他のものを選択すると、titleは決して変更されません. 一度しか機能しないようですng-attr-title??? 常にバインドしたいのですが、何か提案はありますか?
注:
私の問題は厳密にng-attr-titleand/ortitle属性にあり、ディレクティブ自体にあるのではないことに注意してください。私はそれをどのように実装したかを示すためにのみ提供しました。

4

1 に答える 1

1

いくつかの試行錯誤の後、機能するようになり、title属性を動的に更新しようとしましたが、それはTipsy拡張機能を使用する方法ではありません。代わりに、要素の作成後original-titleに投稿されるものすべてに属性を使用する必要がありますにはツールチップがあり、これを呼び出すこともでき、テキストを動的に更新する効果があります (Tipsy Web サイトで言及されているように)。したがって、私のコードは代わりにこれで変更する必要があります:

<input type="number" name="price" ngx-tipsy="s" ng-attr-original-title="{{ (mytype == 'type1') ? 'some title' : '' }}" title="" ng-model="myprice">

回答に属性を追加しましたtitleが、実際には最終結果に影響を与えることなく削除できました。最も重要なことは、属性を使用することです。angular を使用するoriginal-titleとng-attr-original-title、適切なバインディングになります。また、ディレクティブが実際に適切に作成されたこともわかります。

于 2014-01-03T00:35:58.663 に答える