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

4

1 回答 1

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-titleangular 的属性，因此它变成ng-attr-original-title了正确的绑定。它还告诉我，我的指令确实是正确构建的。

于 2014-01-03T00:35:58.663 回答