Question

好的，所以我自己制作了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-title和/或title属性，而不是指令本身，我只提供它来展示我是如何实现它的。

Answer 1

经过几次试验和错误后我才开始工作，我试图动态更新title属性，但这不是使用Tipsy扩展的方式，而是我必须使用original-title 创建具有工具提示的元素之后发布的任何内容的属性，您也可以调用它具有动态更新文本的效果（如Tipsy网站上所述）。所以我的代码必须改为：

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

我在答案中添加了title属性，但实际上可以删除它而不会影响最终结果。最重要的是使用original-title的属性，因此角度变为ng-attr-original-title以进行正确的绑定。它还告诉我，我的指令确实正确构建。

如何使用AngularJS动态绑定Title属性上的Tipsy工具提示

1 个答案: