javascript - 在我的自定义指令中动态添加 bootstrap.ui 工具提示

Question

我可以使用 bootstrap.ui 指令工具提示向我的 html 元素添加工具提示例如，内容有效。

但是，我正在创建自己的属性指令以进行内联编辑。该指令在使用中看起来像这样:

<h4 ng-bind="model.fieldName" type="text" style="display: inline" edit-on-click="model.fieldName" save="saveFieldName"></h4>

我的指令 edit-on-click 只是添加了一个放置输入框的 onclick 函数并将 ng-model 设置为与单击编辑中相同的名称。当用户按下 Enter 或模糊字段时，将调用 save 方法。这工作得很好，而且还有很多其他指令在做同样的事情。

但是，我确实想向 mouseenter 上的现有标记添加一个工具提示，以使其可见该字段是可编辑的。

我已经尝试了几种方法，例如在链接函数中添加工具提示属性，并尝试将其添加到编译函数中，但 Angular 不会将该属性作为指令处理。如何让 Angular 看到现有标签上有一个新指令？

我不想向原始 html 标记添加工具提示，因为这应该是指令的一部分。

我的指令看起来像这样

directive("editOnClick", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, iElement, iAttrs, controller) {
                var inputC = $compile("<input type='" + iAttrs.type + "' ng-model='" + iAttrs.editOnClick + "'>")(scope);
                var input = inputC.eq(0);
                var oldDisplay, saveFunc = iAttrs.save;
                input.blur(function (evt) {
                    if (saveFunc && scope[saveFunc]) {
                        scope[saveFunc](function () {
                            input.css("display", "none");
                            iElement.css("display", oldDisplay);
                        });
                    }
                });
                iElement.after(input);
                iElement.click(function () {
                    oldDisplay = iElement.css("display");
                    iElement.css("display", "none");
                    input.css("display", "block")
                    input.click();
                    input.keyup(function (evt) {
                        if (evt.keyCode === 13) {
                            input.blur();
                        }
                    });
                });
            }
    }
})

所以我可以轻松地向 iElement 添加属性，但我需要告诉 Angular 将其解析为指令才能获取工具提示。

Answer 1

如果我正确理解你的问题，请尝试这个。

compile: function() {
    return {
    pre: function precompile(scope, element, attrs) {
        if(angular.isUndefined(element.attr('tooltip'))) {
            element.attr('tooltip', 'Click to edit');
            $compile(element)(scope);
        }
    }
};
}

需要 if 语句，否则会陷入无限循环。